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.

Yes, but I would like to know how to modify the template generated by the Angular CLI. — HansMu158
– HansMu158, Commented Jul 7, 2016 at 18:09
Just change the base href from href="/" to href="./" which will allow the app to run — Gary
– Gary, Commented May 5, 2018 at 4:01

VtoCorleone · Accepted Answer · 2016-08-09 20:29:01Z

12

You can also change

<base href="/">

to

<base href="./">

answered Aug 9, 2016 at 20:29

VtoCorleone

17.2k5 gold badges40 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

HansMu158 · Accepted Answer · 2016-07-09 09:07:57Z

6

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>

answered Jul 9, 2016 at 9:07

HansMu158

5556 silver badges15 bronze badges

Comments

Ashish Koshy · Accepted Answer · 2018-05-05 03:23:30Z

2

This Github project by 'maximegris' sets up the environment for working with Angular 5 and Electron.

https://github.com/maximegris/angular-electron

It proved to be a life saver for me. Hope you find this helpful too.

answered May 5, 2018 at 3:23

Ashish Koshy

1311 silver badge7 bronze badges

Comments

Rohan Sharma · Accepted Answer · 2016-07-07 18:31:55Z

-2

download angular.js from the CDN and put it in your app folder. Then in your html file use

<script type="text/javascript" src="angular.js"></script>

Unlike a browser electron will not have a problem picking up angular.js from your file system.

answered Jul 7, 2016 at 18:31

Rohan Sharma

1,5862 gold badges14 silver badges19 bronze badges

Collectives™ on Stack Overflow

Use Angular 2 with Electron (Angular CLI)

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related