Use Angular Application As Desktop Application Using Electron

Introduction

In this article we will learn about how to use Angular as a desktop application using the Electron plug-in, and also we will see how to create a set up for Windows.

To read and understand this article we should have the below prerequisites:

Familiarity with Angular and TypeScript
Node.js and npm installed on your development machine.

Create a new project using the below commands:

npm install -g @angular/cli
ng new sampleWebDeskApp
cd ./ sampleWebDeskApp
ng serve – To launch web the application

Create main.js file at path ProjectDir/main.js as below. Add the below source code in main.js file:

const { app, BrowserWindow } = require('electron')
var path = require('path')
let win;
function createWindow() {
// Create the browser window.
win = new BrowserWindow({
width: 600,
height: 600,
backgroundColor: '#ffffff',
})
win.setMenu(null);
win.loadURL(`file://${__dirname}/dist/sampleWebDeskApp/index.html`)
// uncomment below to open the DevTools.
//win.webContents.openDevTools()
// Event when the window is closed.
win.on('closed', function () {
win = null
})
}
// Create window on electron intialization
app.on('ready', createWindow)
// Quit 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 () {
// macOS specific close process
if (win === null) {
createWindow()
}
})

Modify the “main” and Add “desk” values in the package.json file.

Install Electron using the command: npm install electron

Launch the project using the below command in terminal: npm run desk

If you're using Angular 8, you may face the issue "Failed to load module script," to fix this go to the tsconfig.json file and simply update the target key from es2015 to es5.

Install electron package manager to create setup: npm install electron-packager

For creating a set up, in Package.json add the below commands:

"setup-win": "electron-packager . sampleWebDeskApp --overwrite --asar=true --platform=win32 --arch=ia32 --icon=dist/assets/Images/AppIcon.ico --prune=true --out=release-builds --version-string.CompanyName=MyCompany --version-string.FileDescription=Test --version-string.ProductName=\"sampleWebDeskApp\"",

To build setup: For windows run the command: npm run setup-win

After successful execution of this command we will get exe at path : projectDir\release-builds\sampleWebDeskApp-win32-ia32\sampleWebDeskApp-win32-ia32.exe

Note

All styles/Image files should refer from local.

We can keep styles file/Image files in dist/ assets/

Summary

In this article, we learned about how to use Angular applications as a desktop application using Electron.