Setup

Before we can start working on our electron angular app, we need to set up some stuff first.

Creating a new Angular project

Following this tutorial, you can use any existing angular app you want and it should work out just fine.

For this tutorial, we are going to create a new angular project from scratch using the angular-cli.

To create a new project, install the angular-cli if you haven’t done so already

npm install -g @angular/cli

Next, create a new project using the following command:

ng new angular-electron

angular-electron will be the name of our project. This will become important later.

Adding electron to the project

Afterward, we need to install electron itself.

To do that, we switch to the projects root directory and add it to the project as dev-dependency like so:

npm i -D electron

Why is it just a dev-dependency?

Because we don’t want it to be included in our app itself. We only need it at build-time to build the desktop app.

Installing types

Because we will be using TypeScript for our angular application as well as in our electron-files, we need to add the corresponding type definitions to our project.

We can do so using npm again:

npm i -D @types/electron

Because types are irrelevant for the running application, we add it as dev-dependency, as well.