How to Build an Angular Desktop App with Electron

In this guide you’ll learn how to build and launch a simple Angular project as desktop application using Electron.

While you don’t need to use the Angular CLI to start a new Angular project, doing so makes the process so much faster and easier. This tutorial assumes that you are using the CLI tools, if you don’t already have them installed, you can install them now by running npm i -g @angular/cli. This will install the Angular CLI globally on your machine.

Awesome! Let’s get started.

Create a new Angular project

Angular is a TypeScript-based open-source front-end web application platform led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS.

Wikipedia

In your terminal, type ng new angular-electron and press enter to create a new Angular project called angular-electron.

Now type cd angular-electron to move into your new project directory.

Install and set up Electron

Electron is an open-source framework developed and maintained by GitHub. Electron allows for the development of desktop GUI applications using front and back end components originally developed for web applications: Node.js runtime for the backend and Chromium for the frontend.

Wikipedia

You’ll need to add the electron npm package to your project now. Run npm i -D electron@latest to install the electron package as a development dependency.

Add an Electron entry point

Angular is usually set up to use a TypeScript file called main.ts in the src directory of the project as the entry point for the application. You could do the same for Electron, but let’s avoid some confusion and create a regular JavaScript file called index.js in the root of the project directory.

The directory structure should now look like this:

angular-electron
|- dist
|- e2e
|- node_modules
|- src
|- .editorconfig
|- .gitignore
|- angular.json
|- index.js
|- package-lock.json
|- package.json
|- README.md
|- tsconfig.json
|- tslint.json

In the index.js file, let’s add the following from the official electron-quick-start guide:

// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron');

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;

function createWindow () {
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600});

// and load the index.html of the app.
mainWindow.loadFile('./dist/index.html');

// Open the DevTools.
// mainWindow.webContents.openDevTools()

// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null;
})
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit();
}
})

app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow();
}
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

Configure your package.json

Next, update your project’s package.json file so that it knows where to look for your Electron file as the main entry point and add a script command to buld it.

{
"name": "angular-electron",
"version": "0.0.1",
"main": "index.js",
...

Now let’s add an npm script to build compile the Angular code and then launch it as a desktop app with the Electron.

"scripts": {
"electron": "ng build --prod --aot --base-href ./ && electron .",
    …
  • The –prod flag tells the Angular CLI that you’d like to build this for deployment. Read more here.
  • The –aot flag tells the Angular CLI to build with Ahead of Time compilation. Check out the benefits here.
  • The –base-href flag tells the Angular CLI to set the href attribute on the base tag in the index.html file with the value of ./.

One final step before your app is ready to run

Update the outputPath value in your Angular project’s angular.json file. This will output your compiled Angular files directly to the dist directory, instead of dist/angular-electron.

"architect": {
"build": {
    "builder": "@angular-devkit/build-angular:browser",
        "options": {
        "outputPath": "dist",
...

Run the app

Awesome work, here’s your big moment! Run the command npm run electron, it’ll take a few seconds to build everything, but you should see your app pop onto the screen when it’s done.

Thank you for hanging in there! If you have any suggestions or feedback, please leave a comment and share this article with your friends. Go forth and build something fantastic!

Angular Electron JavaScript

Start the discussion on the forums.