Adding Angular to Your Electron App


| January 12, 2023 | in

In an earlier blog post, I described how we could create an Electron tray application. In that post, we got a simple Electron application running. In this post, we will augment the application with Angular to provide structure and utilities helpful for building an application.

This should be very straightforward, but if you try to make it work you’ll find it a little tricky.

We start by creating an Angular project:

ng new angular

Open the directory using VS Code.

Run the Angular application. You can use the “Run and Debug” tab to get to the Run button. Then click the green Play button.

The Run button

Next, install Electron. You can do this using the VS Code Terminal if you want.

npm install electron

Using the terminal in VS Code to install Electron

Now we must create an index.js file for hosting the Electron process. It is very important that we also add an entry to the package.json file that tells Electron the name of our main JS file.

"main": "main.js"

After completing this, we must create a main.js file that will load our application. Below is a very simple main.js.

Now we can run the Angular app.

ng serve

Then run the Electron application.


Now you have an Angular application running inside of an Electron application.


Related posts