Create Angular Desktop App Using Electron

Introduction

 
In this article, we'll learn to build cross-platform Desktop app for Angular 8/7 by integrating it with Electron.
 

Electron

 
Electron is an open-source framework developed and and maintained by GitHub. It is a popular platform for building cross-platform desktop apps for Windows, Linux and macOS with JavaScript, HTML, and CSS.It is essentially a web application that is self-contained as a desktop application.
 
In this guide, we will look at how to create an Electron application with the Angular framework using TypeScript. We will cover, 
  • Building a project from scratch
  • Packaging the desktop application for distribution
  • Using live reloading for development

Installing AngularCLI

 
Let’s get started by installing Angular CLI, which is the official tool for creating and working with Angular projects. Open a new terminal and run the below command.
 
npm install -g @angular/cli 
 
Steps to follow,
 
Step 1
 
Create an Angular project setup using the below command or however you want to create it.
 
ng new projectname
 
Example,
 
ng new angularElectron
 
Create Angular Desktop App Using Electron
 
Step 2
 
Now, we must install Electron in our Angular app. Open a new terminal and run the below command.
 
npm install electron --save-dev
 
Create Angular Desktop App Using Electron
 
Even after installing, Electron will be unaware of the Angular app. So, it should be linked with the Angular app in order to work.
 
Step 3
 
Create a script file named as main.js and copy the below code in it. This file is used to link the Angular project with Electron.
  1. const {  
  2.     app,  
  3.     BrowserWindow  
  4. } = require('electron')  
  5. // Keep a global reference of the window object, if you don't, the window will  
  6. // be closed automatically when the JavaScript object is garbage collected.  
  7. let win  
  8.   
  9. function createWindow() {  
  10.     // Create the browser window.  
  11.     win = new BrowserWindow({  
  12.         width: 800,  
  13.         height: 600,  
  14.         webPreferences: {  
  15.             nodeIntegration: true  
  16.         }  
  17.     })  
  18.     // and load the index.html of the app.  
  19.     win.loadFile('dist/angularElectron/index.html')  
  20.     // Open the DevTools.  
  21.     win.webContents.openDevTools()  
  22.     // Emitted when the window is closed.  
  23.     win.on('closed', () => {  
  24.         // Dereference the window object, usually you would store windows  
  25.         // in an array if your app supports multi windows, this is the time  
  26.         // when you should delete the corresponding element.  
  27.         win = null  
  28.     })  
  29. }  
  30. // This method will be called when Electron has finished  
  31. // initialization and is ready to create browser windows.  
  32. // Some APIs can only be used after this event occurs.  
  33. app.on('ready', createWindow)  
  34. // Quit when all windows are closed.  
  35. app.on('window-all-closed', () => {  
  36.     // On macOS it is common for applications and their menu bar  
  37.     // to stay active until the user quits explicitly with Cmd + Q  
  38.     if (process.platform !== 'darwin') {  
  39.         app.quit()  
  40.     }  
  41. })  
  42. app.on('activate', () => {  
  43.     // On macOS it's common to re-create a window in the app when the  
  44.     // dock icon is clicked and there are no other windows open.  
  45.     if (win === null) {  
  46.         createWindow()  
  47.     }  
  48. })  
  49. // In this file you can include the rest of your app's specific main process  
  50. // code. You can also put them in separate files and require them here.  
Change the path of index.html in the script based on your project path.
 
Refer line#18
 
Create Angular Desktop App Using Electron
 
Step 4
 
In Index.html, modify the below line
  1. <base href="/"> to <base href="./">  
Refer line#6
 
Create Angular Desktop App Using Electron
 
Step 5
 
In package.json, add the below line to link the newly created script file.
 
"main":"main.js",
 
In Scripts, add the below code to run Electron with short code.
 
"electron":"ng build && electron ."
 
Refer line#12
 
Create Angular Desktop App Using Electron
 
Step 6
 
Now, run the application
 
npm run electron
 
Create Angular Desktop App Using Electron
 
On successful execution of the above command, the following Angular UI window pops out.
 
Create Angular Desktop App Using Electron