HansMu158 HansMu158 - 1 year ago 915
Javascript Question

Use Angular 2 with Electron (Angular CLI)

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();

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

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.

Thanks for help!

Answer Source

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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download