Build Electron Desktop App with Angular 8 | Electron Angular Tutorial

By Digamber Rawat Last updated on
In this tutorial, we are going to learn step by step how to build a cross-platform basic Electron desktop application with Angular 8 front-end framework.

Electron.js is a well known open-source platform developed by GitHub under the MIT license. It helps in building a robust cross-platform desktop application for various devices such as macOS, Linus, and Windows using HTML, JavaScript, and CSS. To know more about Electron.js you can visit their official site here.

Electron makes developers life easy by managing the hard work by itself. It uses Google Chromium and Node.js and allows you to build flexible and powerful apps using HTML, CSS, and JS. Electron also offers its own collection of APIs for building web apps.

In this tutorial, we will take a look at how to set up an Angular 8 app from scratch and run within the Electron with the help of TypeScript and its own set of native APIs.

Let’s start building Electron and Angular 8 app.

Prerequisite

To understand this tutorial thoroughly, you must be aware of the following prerequisites:

Set up Angular CLI

Angular projects are developed using Angular CLI, it’s an official tool to work with Angular. Run command to install the Angular CLI, ignore this step if Angular CLI is already installed.

npm install @angular/cli -g

Building Angular 8 Project

In this step, we are going to build Angular 8 project using Angular CLI from scratch. Run command to set up Angular project, Angular CLI will ask you few questions answer those questions as per your choice.

ng new electron-angular-app

? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS

# CREATE electron-angular-app/README.md (1035 bytes)
# CREATE electron-angular-app/.editorconfig (246 bytes)
# CREATE electron-angular-app/.gitignore (629 bytes)
# CREATE electron-angular-app/angular.json (3537 bytes)
# CREATE electron-angular-app/package.json (1293 bytes)
# CREATE electron-angular-app/tsconfig.json (435 bytes)
# CREATE electron-angular-app/tslint.json (1988 bytes)
# CREATE electron-angular-app/browserslist (429 bytes)
# CREATE electron-angular-app/karma.conf.js (1032 bytes)
# CREATE electron-angular-app/tsconfig.app.json (210 bytes)

............................................................
............................................................
............................................................

Get inside the project directory by running the following command:

cd electron-angular-app

Install latest Electron Version in Angular 8 Project

In this step, we will install the latest version of Electron inside the root folder of the Angular 8 project.

Run the below command to set up Electron in Angular project:

npm install electron@latest --save-dev

As you can see, we are installing Electron package as a dev dependency because we want to use this package during development phase. We don’t want this package to be included in the main application.

Once the electron is successfully installed, you can check out the electron version by running the given below command in the terminal:

electron --version

# v6.0.1

We are using Electron v6.0.1 at the time of creating this tutorial.

Initialize Electron App

To configure electron inside Angular project, create a new file in the root of the Angular project. Name it app.js and keep all the Electron related code inside of it.

Run command to create an app.js file:

touch app.js

Start Building The Electron App

Go to app.js file and add the required dependencies to initialize the Electron in Angular 8 app:

const { app, BrowserWindow } = require('electron')
const url = require("url");
const path = require("path");

Define a variable which will be referred to the appWindow, and This is the same window which Electron will open to host our Angular 8 app.

let appWindow

Setting up the Electron Window

Declare initWindow function, and this function will create a new Electron window which will help Angular to host our electron application.

By using the BrowserWindow method, we declared the window dimensions for the electron window.

function initWindow() {
  appWindow = new BrowserWindow({
    width: 1000,
    height: 800,
    webPreferences: {
      nodeIntegration: true
    }
  })
}

You can also declare the fullscreen property inside the BrowserWindow method to show the full-screen electron app window.

function initWindow() {
  appWindow = new BrowserWindow({
    fullscreen: true
  })
}

Set up Electron Build Path

This function will define the Electron app build path.

function initWindow() {
  appWindow.loadURL(
    url.format({
      pathname: path.join(__dirname, `/dist/index.html`),
      protocol: "file:",
      slashes: true
    })
  );
}

Register Electron Listeners

Now register event listeners in electron object these listeners initialize electron app.

app.on('ready', initWindow)

app.on('activate', function () {
  if (win === null) {
    initWindow()
  }
})

Final app.js File

const {
  app,
  BrowserWindow
} = require('electron')
const url = require("url");
const path = require("path");

let appWindow

function initWindow() {
  appWindow = new BrowserWindow({
    width: 1000,
    height: 800,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // Electron Build Path
  appWindow.loadURL(
    url.format({
      pathname: path.join(__dirname, `/dist/index.html`),
      protocol: "file:",
      slashes: true
    })
  );

  // Initialize the DevTools.
  appWindow.webContents.openDevTools()

  appWindow.on('closed', function () {
    appWindow = null
  })
}

app.on('ready', initWindow)

// Close when all windows are closed.
app.on('window-all-closed', function () {

  // On macOS specific close process
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  if (win === null) {
    initWindow()
  }
})

Configure app.js to Start Electron

In the next step, go to package.json file and include the main property along with app.js as an entry point.

{
    "name": "electron-angular-app",
    "version": "0.0.0",
    "main": "app.js",
    "scripts": {
      [...]
      [...]
      [...]
    },
}

Then go to src => indext.html file and set the '.' dot before the forward slash in base url. It will help you to get rid from ‘Failed to load resource: net::ERR_FILE_NOT_FOUND’ error.

<base href="./">

In the next step, we have to define the ng build for electron app this script will initialize the Electron app once the Angular build is completed.

{
    "name": "electron-angular-app",
    "version": "0.0.0",
    "main": "app.js",
    "scripts": {
      "start:electron": "ng build --base-href ./ && electron ."
    },
}

In the above code, I have included the start:electron script which initialize the ng build --base-href ./ && electron ..

Got to angular.json file and head over to projects => architect => build => options => outputPath and remove the project name from the dist/electron-angular-app value and set it to only dist.

  "projects": {
    "electron-angular-app": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",

Run the command from your terminal to start the Electron Angular app.

npm run start:electron

Handle Electron Failed to Load Module Script Errors

If you are getting the following errors when Electron window is launched:

  • Failed to load module script: The server responded with a non-JavaScript MIME type of “”. Strict MIME type checking is enforced for module scripts per HTML spec.
  • Failed to load module script: The server responded with a non-JavaScript MIME type of “”. Strict MIME type checking is enforced for module scripts per HTML spec.
  • Failed to load module script: The server responded with a non-JavaScript MIME type of “”. Strict MIME type checking is enforced for module scripts per HTML spec.

Then, go to tsconfig.json and update the "target": "es2015" property to "target": "es5" and restart the electron project.

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

Conclusion

Finally, we have finished learning how to build an Electron desktop app with Angular 8 from scratch. I hope you loved the way we learned to set up the Electron app in Angular and using Electron API in this tutorial.

Git Repo

Digamber Rawat
Digamber Rawat

Full stack developer with a passion for UI/UX design. I create beautiful and useful digital products to solve people’s problem and make their life easy.

Hire Me