Angular 2 app with routers inside electron problems


I am having a lot of trouble trying to use routes with electron. I am following tutorials with no luck. Can someone please point me into the right direction? Here is my code for just trying to load a simple home component.

main.js inside app/

var electron = require('electron');
var app =;
var BrowserWindow = electron.BrowserWindow;
var mainWindow = null;

app.on('window-all-closed', function () {
  if (process.platform != 'darwin') {

app.on('ready', function () {
  mainWindow = new BrowserWindow({ width: 1200, height: 900 });
  mainWindow.loadURL('file://' + __dirname + '/index.html');
  mainWindow.on('closed', function () {
    mainWindow = null;



index.html inside app/

       <meta charset="utf-8">
       <base href="/">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <link rel="icon" type="image/x-icon" href="favicon.ico">
     <h1>Index On</h1>

     <script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
     <script src="../build/common.js"></script>
     <script src="../build/angular2.js"></script>
     <script src="../build/app.js"></script>

App.ts inside app/start/

///<reference path="../../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from "angular2/platform/browser";
import { Component, provide } from "angular2/core";
import { ROUTER_DIRECTIVES, RouteConfig, Router, ROUTER_PROVIDERS } from 'angular2/router';
import { APP_BASE_HREF,HashLocationStrategy, Location, LocationStrategy } from '@angular/common';
import { Control } from 'angular2/common';
import { HomeComponent } from '../home/home.component';

 { path: '/home', component: HomeComponent, name: 'HomeComponent' },
 { path: '/**', redirectTo: ['HomeComponent'] }

  selector: "app",
  directives: [ROUTER_DIRECTIVES],

 export class App {}

 bootstrap(App, [
  provide(APP_BASE_HREF, { useValue: '/' }),
  provide(LocationStrategy, { useClass: HashLocationStrategy })

HomeComponent inside app/home

import { Component} from '@angular/core';
  import { Router } from '@angular/router';

    selector: 'app-home',
    template:  `<h1>Home is working</h1>`,
   export class HomeComponent{




I don’t know if this will help, but I found issues with libraries that use “require” (I think angular was one of those).

To get around this, I have a snippet of code that “moves” the electron require-related methods into an “electron” object:

var electron = electron || {};
electron.require = electron.require || window.require;
electron.exports = electron.exports || window.exports;
electron.module = electron.module || window.module;

delete window.require;
delete window.exports;
delete window.module;


Make base href to empty i.e <base href=''>
it worked for me