Angular Electron App: Desktop Deployment Guide

^{Published on: 2025-03-11}

Creating the Angular application

1. Install the Angular CLI: npm install -g @angular/cli.
2. Create the Angular application: ng new my-angular-app.
3. Navigate to the newly created project.
4. Install Electron: npm install electron --save-dev.

Electron files

In the root folder of your project create a main.js and a preload.js file and paste the following in main.js:

const { app, BrowserWindow } = require('electron');
const path = require('node:path');

const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  });

  mainWindow.loadFile(path.join(__dirname, '/dist/my-angular-app/browser/index.html'));
};

app.whenReady().then(() => {
  createWindow();

  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

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

Make sure to change path in the mainWindow.loadFile call to match your project name.

Configuration

package.json

Add the following to package.json:

...
  "main": "main.js",
  "scripts": {
    ...
    "electron": "ng build && electron ."
    ...
  }
...

index.html

In /src/index.html change the href attribute of the base element to ./.

Running

Now, we can run the Electron application by executing npm run electron-build. This will build the Angular application to the ./dist folder and then run it in Electron.

Packaging

In your project's root folder, run the following command: npm install electron-builder --save-dev and then add the following to package.json:

...
  "build": {
    "appId": "com.example.yourapp",
    "directories": {
      "output": "dist_electron"
    },
    "files": [
      "dist/**/*",
      "electron/**/*",
      "main.js"
    ],
    "win": {
      "target": "portable"
    }
  }
...

To build everything, execute the following command: npx electron-builder. This will create a folder ./dist_electron that contains all the target build folders. In our configuration, we only target Windows. Look for the win_unpacked folder – this folder will contain the executable file. All the files in win_unpacked are necessary for your application to run. Make sure to package them when distributing your application.