Multi-window Electron app with Angular 2+/4


#1

I’ve been struggling with building a multi-window Electron app with the latest Angular 4. I’ve seen several samples of opening the new BrowserWindow loading the static HTML files by ipc-main and ipc-renderer and also did my POC successfully. However, once the Angular comes into the picture, I don’t know how to have only one Angular app running and have Electron open a new BrowserWindow with different view (by the Angular router or something else) and still stay at the same application context.

So far all the samples I found with Electron/Angular are based on the SPA model, which is not surprised because Angular is SPA framework essentially. Does that mean Angular may not be a suitable solution for this use case? Should I go with less opinionated JS library like ReactJS with custom vanilla JS code?


#2

Take a look at https://beta.electronforge.io/templates
You can start an electron template for angular2 then update to angular4. You also could define your routes inside the angular app.
I also found this that helped me with the initial setup.


#3

First I really appreciate your reply!

I tried the Electron Forge and it indeed provides a good starting template for Electron/Angular. However, my question is how should I open a BrowserWindow from the Angular application and still stay within the same application context.

As I know, to create a BrowserWindow in the main process always requires either a remote URL or local HTML file. I don’t know if we can have multiple HTML in one Angular app(most likely not, I guess). Does that mean I need to implement every window as separate Angular app? (It sounds crazy myself)


#4

There is no way for two browser windows to execute in the same context, since they are completely separate processes. So you are correct, they would have to be separate apps, or at least separate instances of the same app.

In my project, we have a single app that runs in every window, and uses IPC on startup to determine which top level component to mount. This way it is a single codebase, but different windows can be displaying different pieces.

One of the major challenges with a multi-window app is communication between the windows, since it has to be done via IPC. We are using Vuex, which is a simple flux-like implementation for VueJS. Every time a mutation is committed in one window, it is proxied to other windows via IPC. This creates a pretty seemless experience when developing, since 99% of the code doesn’t need to care which window it will be run in.

I have never used Angular, but I don’t see why these general concepts couldn’t be applied to an Angular app. However, I think you should carefully consider whether you need a multiple window approach. It makes things much more complicated. Before taking the multi-window approach, you should consider whether a simple HTML modal would be acceptable for your app.


#5

Thanks @ebordon, I’m using Angular 4 with the Angular CLI, and have been able to build get the default application to work, but I don’t understand why I can see process.versions.electron in index.html and not in a component template. Do you have an other resource, or able to explain why this is?