How to build an Electron app with Angular

Angular Electron


I have shown you how to build an Angular app, how to turn it into a PWA and a mobile phone app. Now I will show you how to create a desktop app with Angular and Electron.



  • Node
  • Angular
  • Electron


Sample Code

Download the source code from Github:


Build a desktop app with Angular

Electron makes it easy to build cross-platform desktop apps with JavaScript, HTML, and CSS.


Clone the Electron “getting started” project:

git clone


Test the app by running:

npm start


Clone the Angular app:

git clone


Build your Angular app:

cd manchester-angular-workshop-getting-started
ng build


Copy the dist folder to the Electron folder:

copy dist/getting-started electron-getting-started/dist


Modify the index.html. The app will load from the file system (rather than a web server) so change the href to:

<base href="./">


Modify main.js: Open the file main.js and change the line mainWindow… to:



Test your app: Run the command:

npm start



Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.