Create Desktop App With Angular (Easier Then You Think)

Angular is great as a web framework.

But, you can also use Electron to package your Angular app as an actual desktop app.

We can build a desktop app for Mac OS, Windows and Linux with Angular.

Now, if you use Electron, people on the internet might sling ya some words for not building a REAL app.

They will complain you didn't use the native API's.

But hey, if Electron is good enough for popular desktop apps like VS Code, GitHub Desktop, Slack and Microsoft Teams then it's good enough for us.

Let's get started!

1. Create Angular Workspace

For our demo I'll be creating a new Angular projected called ng-electron.

ng new ng-electron

During the set up we'll be asked if we want to enable SSR. Let's make sure to turn this option off.

Install and Configure Electron

We'll need to install Electron and Electron Builder.

npm install electron electron-builder --save-dev

Now we'll need to create the Electron script to launch our Angular app as a desktop application.

We'll name this file index.js and place it in the root directory.

'use strict'

import { app, BrowserWindow } from 'electron'
import * as path from 'path'
import { format as formatUrl } from 'url'

let mainWindow;

function createMainWindow() {
  const window = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true, 
            allowRunningInsecureContent: false, 
            contextIsolation: false, 
            enableRemoteModule: true, 
            webSecurity: false
        }
    });

  const appDirectory = path.resolve();

  window.loadURL(formatUrl({
    pathname: path.join(appDirectory, 'index.html'),
    protocol: 'file',
    slashes: true
  }));

  window.on('closed', () => {
    mainWindow = null;
  });

  window.webContents.on('devtools-opened', () => {
    window.focus();
    setImmediate(() => {
      window.focus();
    });
  });

  return window;
}

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (mainWindow === null) {
    mainWindow = createMainWindow();
  }
});

app.on('ready', () => {
  mainWindow = createMainWindow();
});

Configure Electron Builder

And now that Electron is configured, we'll configure Electron Builder to package our app.

First, we'll have to edit the package.json file.

We'll need to add 3 things:

• description
• author
• electron build script

You're package.json should look something like this.

"name": "desktop-app",
  "version": "0.0.0",
  "description": "My desktop app",
  "author": {
    "name": "Daniel Kreider",
    "email": "hello@danielk.tech",
    "url": "https://danielk.tech"
  },
  "scripts": {
    "electron": "ng build -c production && electron-builder",
    // ...
  }
  // ...
}

And now we'll create the electron-builder.json file.

{
    "asar": true,
    "directories": {
      "output": "dist/ng-electron/desktop/"
    },
    "files": [
      "**/*",
      "**/*.ts",
      "!*.map",
      "package.json",
      "package-lock.json"
    ],
    "extraFiles": [
        {
            "from": "dist/ng-electron/browser/",
            "to": ""
        }
    ],
    "win": {
      "icon": "dist/assets/icons",
      "target": [
        "portable"
      ]
    },
    "portable": {
      "splashImage": "dist/assets/icons/electron.bmp"
    },
    "mac": {
      "icon": "dist/assets/icons",
      "target": [
        "dmg"
      ]
    },
    "linux": {
      "icon": "dist/assets/icons",
      "target": [
        "AppImage"
      ]
    }
}

Configure the Angular HTML file

And last of all, we need to change the base href in the index.html file.

It should look like this.

<base href="./">

Let's build this!

npm run electron

And there you have it, the desktop app you built with Angular is now in the dist/desktop folder.

Till next time,

Daniel Kreider