DEV Community

Integrating an Angular-CLI application with Electron - The IPC

Michael De Abreu on January 29, 2018

Previously on... In the previous sections and stories, I explained how to integrate an Angular-CLI generated application with Electron, ...

Read full post

8-prime • Aug 7 '23

I know others have said it before but you are my hero. After trying just about everything else the internet had to offer I finally got where I wanted because of this post.

panyann • Jul 10 '23

I specially registered to thank you, without this I would spend many hours researching how to do that. 2023 and it still works! Now I can focus on what I wanted to do.

MatteoGheza • Sep 2 '21 • Edited

To everyone having issues with "Electron's IPC was not loaded":
You need to add contextIsolation: false to webPreferences.
Example:

webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
}

It worked for me.

Jeevan Antony Varghese • Dec 15 '23

Thanks

Charles Robertson • Mar 15 '20

Michael, thanks so much for the reply.

Great tutorial by the way!

I am using VSCode and I type in:

npm run electron:start

In the VSCode terminal window

Then the Chromium window opens successfully, which is good.

At this point, I get:

Electron's IPC was not loaded

In Chromium’s DEV tools console

Then I type:

npm start

In Chromium’s DEV tools console and press return.

This is when I receive the error.

Charles Robertson • Mar 15 '20 • Edited

This simply does not work.

ENVIRONMENT

Angular CLI: 8.3.25
Node: 12.14.0
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.25
@angular-devkit/build-angular     0.803.25
@angular-devkit/build-optimizer   0.803.25
@angular-devkit/build-webpack     0.803.25
@angular-devkit/core              8.3.25
@angular-devkit/schematics        8.3.25
@angular/cli                      8.3.25
@ngtools/webpack                  8.3.25
@schematics/angular               8.3.25
@schematics/update                0.803.25
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.39.2

I have copied everything precisely and after the window opens successfully, I type in:

npm start

Into Chromium's Dev Tool input.
I get the following error:

VM140:1 Uncaught SyntaxError: Unexpected identifier

I also get a warning in the console:

Electron's IPC was not loaded

Michael De Abreu • Mar 15 '20

You have to run npm run electron:start in the Angular app, and npm start in the electron app.
That being said, I have to update this as this may be outdated.

Andre Pan • Jul 12 '20

Seems I'm not the only one keep getting 'IPC was not loaded', which means window.require is still not allowed? Tried almost every solution on the web, yours is the closest one to my own, but unfortunately, both mine and yours don't work, the only difference is mine is based on a pretty old version of electron and angular, I just updated them to the latest version, but the entry point remains main.js instead of index.ts, well, no idea what's going wrong

joohansson • Jul 2 '20

I'm stuck with the exact same issue in another angular app using electrum. I think the code was taken from this guide because it's pretty much identical but was broken when upgrading electrum and angular. The window object is undefined and I've tried adding the nodeIntegration: true in webPreferences but no difference.

It doesn't get passed this step (which worked perfectly fine before): github.com/BitDesert/Nault/blob/c3...

Still no solution to this?

Jessy • Sep 27 '19

Missing from this article is that, for window.require to work you also need to make sure your BrowserWindow you create has the option

...
webPreferences: {
  nodeIntegration: true,
}

Michael De Abreu • Sep 27 '19

Thanks! Looks like one of the changes they introduced with Electron 4. electronjs.org/blog/electron-4-0

Charles Robertson • Mar 16 '20

Yes. I have added:

webPreferences: {
  nodeIntegration: true,
}

But, I still cannot get the IPC communication working.

AJM • Mar 6 '19

What's IpcCallback? Googling for it...

Jessy • Sep 27 '19

you can simply replace that with any to get things going :)

Charles Robertson • Mar 16 '20

Hi Michael. The part I am a little unsure about is the:

npm start

Do I add this to the Chromium DevTools console?

Charles Robertson • Mar 16 '20

If I try and add:

npm start

To the VSCode terminal window, after I have run:

npm run electron:start

It tries to convert it to:

ng serve

Michael De Abreu • Mar 16 '20

This npm start should start the electron app.

Charles Robertson • Mar 15 '20

I think I am going to try and use ngx-electron, and see if that helps. I just cannot get this to work...

Michael De Abreu • Mar 16 '20

Sorry I couldn't reply to you earlier. Sure, try that. Did you follow the series since the first part? In the first post, the two package structure is introduced, and it seems like you are using just Angular for this.

You could read the comments in the post as well because some of them are about updates in Electron, you must activate some things that in previous versions were activated by default.

I'll reply as soon as possible. Happy hacking!

Charles Robertson • Mar 15 '20

Michael, could you upload the source code for this app to GitHub. I might be able to work out, where I have gone wrong, if I can compare my code to yours.

Michael Loriault • Nov 19 '20

by the way if you want a really good starter template that is maintained have a look at github.com/maximegris/angular-elec... its what i use, some modules tho (like electron-settings, etc) still need the window.require thing, its just how it is if your using webpack (angular, vue, and react all do)