Razvan Ilin Razvan Ilin - 1 year ago 135
Node.js Question

Angular apps break when run in Electron

I started building an Electron app and I am encountering some issues when I try to run an angular distribution inside.

For the angular app I'm using yeoman and grunt for building. If I develop the angular app with

grunt serve
and running it on localhost:9000, the Electron app can pick the application up just fine. However, if I run grunt build and I point the Electron app to the static files I get some angular errors.

[$injector:modulerr] Failed to instantiate module clientApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngResource due to:
Error: [$injector:nomod] Module 'ngResource' is not available! You either
misspelled the module name or forgot to load it. If registering a module
ensure that you specify the dependencies as the second argument.

In the electron app Im running a server with express and I also tried to pick run the angular app through express at localhost:8000. That didn't work either. I also tried to run another angular app that it's deployed on my server and working just fin in the browser - didn't work in Electron. Same errors on all the tries.

I also have to mention that in all cases, if I open the angular app in the browser it works fine.

This is the electron code:

app.on('ready', function() {
// Create the browser window.
mainWindow = new BrowserWindow({width: 1024, height: 764, title: "uMaster"});

// and load the index.html of the app.
var url = path.join(__dirname, "dist", "index.html");
url = "file://" + url;

// mainWindow.loadURL(url); ---- this is not working in Electron
// mainWindow.loadURL("http://localhost:8000"); -- not working when served by express
mainwindow.loadURL("http://localhost:9000"); // working when angular runs with grunt serve

// Emitted when the window is closed.
mainWindow.on('closed', function() {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null;

/* ----------------------- */

Answer Source

Fixed this problem by initialising electron's BrowserWindow with nodeIntegration: false

mainWindow = new BrowserWindow({width: 1024, height: 764, title: "app", "nodeIntegration":false});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download