Use Angular 2 with Electron (Angular CLI)

Question

I generated a new Angular 2 project using the new Angular CLI. Now I don't want to use Angular in browser but in an electron app. Therefore I created a file for the main process of electron and after building my Angular app with ng build in terminal, the app was not working as expected.

File for Main Process of Electron:

var electron = require("electron");
var {app, BrowserWindow} = electron;

app.on('ready', () => {
    var mainWindow = new BrowserWindow();
    mainWindow.loadURL(`file://${__dirname}/dist/index.html`);
});

Error in DevTools:

file:///vendor/es6-shim/es6-shim.js Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///vendor/reflect-metadata/Reflect.js Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///vendor/systemjs/dist/system.src.js Failed to load resource: net::ERR_FILE_NOT_FOUND
file:///vendor/zone.js/dist/zone.js Failed to load resource: net::ERR_FILE_NOT_FOUND
index.html:22 Uncaught ReferenceError: System is not defined

I also know that you essentially need a web server to run Angular 2 Applications and I think my app does not work because Electron loads the App via the file:// protocol.

But I really want to use Electron in conjunction with Angular 2; so my question is if this is possible and if so how I need to modify the generated Angular Template from the cli utility.

Answer 1

You can also change

<base href="/">

to

<base href="./">

Answer 2

After reading something about the Angular 2 Router yesterday, I figured out that the problem is caused by this line in the index.html

<base href="/">

By replacing it with a dynamically set base everything works as expected.

<script>document.write('<base href="' + document.location + '" />');</script>