Post
Ask Question

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:
  1. const { app, BrowserWindow } = require('electron')  
  2. var path = require('path')  
  3.   
  4.   
  5. let win;  
  6. function createWindow() {  
  7.     // Create the browser window.  
  8.     win = new BrowserWindow({  
  9.         width: 600,  
  10.         height: 600,  
  11.         backgroundColor: '#ffffff',  
  12.     })  
  13.     win.setMenu(null);  
  14.   
  15.     win.loadURL(`file://${__dirname}/dist/sampleWebDeskApp/index.html`)  
  16.   
  17.     // uncomment below to open the DevTools.  
  18.     //win.webContents.openDevTools()  
  19.   
  20.     // Event when the window is closed.  
  21.     win.on('closed', function () {  
  22.         win = null  
  23.     })  
  24. }  
  25.   
  26. // Create window on electron intialization  
  27. app.on('ready', createWindow)  
  28.   
  29. // Quit when all windows are closed.  
  30. app.on('window-all-closed', function () {  
  31.   
  32.     // On macOS specific close process  
  33.     if (process.platform !== 'darwin') {  
  34.         app.quit()  
  35.     }  
  36. })  
  37.   
  38. app.on('activate', function () {  
  39.     // macOS specific close process  
  40.     if (win === null) {  
  41.         createWindow()  
  42.     }  
  43. })  
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.


Similar Articles