How to convert angular 4 application to desktop application using electron ? - GeeksforGeeks

13 Dec, 2021
Using Electron JS, we can convert our existing angular project into a desktop application very easily. In this post, we will create a sample Angular project and convert it into a Desktop application step by step.
Prerequisites: 
NPM Must be installed
Environment Setup:
Install Angular CLI:
npm install -g @angular/cli
Create a new Angular Project. Here our project name is “electron-sample“:
ng new electron-sample
cd electron-sample
Now run the project and open http://localhost:4200 to check whether the installation was successful or not.
ng serve -o
Install Electron JS as a development dependency:
npm install electron --save-dev
We also need a package called electron-packager. This package will bundle our app and produce the desktop app files. Install it globally:
npm install -g electron-packager
Example: In the root directory, create a file main.js that will be the entry point for the electron. Add the following code inside main.js:
Javascript
const { app, BrowserWindow } = require("electron");const path = require("path");const url = require("url");  let win;function createWindow() {  win = new BrowserWindow({ width: 700, height: 700 });  // load the dist folder from Angular  win.loadURL(    url.format({            // compiled version of our app      pathname: path.join(__dirname, '/dist/index.html'),       protocol: "file:",      slashes: true    })  );  win.on("closed", () => {    win = null;  });}app.on("ready", createWindow);// If you are using MACOS, we have to quit the app manually app.on("window-all-closed", () => {  if (process.platform !== "darwin") {    app.quit();  }});
In the above code, we have simply opened the complied version of our Angular app that is present in the dist/ directory. Note that we have provided the dist folder directly so that this code works on any application. But the file index.html lies in a subdirectory. Hence, in angular.json, change the value in outputPath key as follows.
...
"architect": {
       "build": {
         "builder": "@angular-devkit/build-angular:browser",
         "options": {
           // Make changes in this line
           "outputPath": "dist",   
           "index": "src/index.html",
           ....
This will save the compiled files into dist folder instead of a sub-directory. In src/index.html, change the line <base href=”/”> to <base href=”./”> as follows.
<head>
 <meta charset="utf-8">
 <title>ElectronSample</title>
 <base href="./">   <!-- Change this line -->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
Now in package.json, we have to add some commands for the development and testing of our app as well as to point to the starting point of the electron app. Add the following lines in package.json.
{
 "name": "electron-sample",
 "version": "0.0.0",
 // This line will provide an entry 
 // point for the electron app
 "main": "main.js",
 "scripts": {
   // Runs the app after compilation
   "electron": "electron .", 
   // Compiles and runs the app
   "electron-build": "ng build --prod && electron .",
   "ng": "ng",
   "start": "ng serve",
   "build": "ng build",
   "test": "ng test",
   "lint": "ng lint",
   "e2e": "ng e2e"
 },
 ...
 ...
Now we can test the app by running it/
npm run electron-build
Note that we can run the commands directly if we had installed electron globally. You should see the below output :
Output:
For compiled app, we can run the app directly using 
npm run electron
When we have created the final app, we can generate the compiled files that can be used directly on our system without installing the dependency. The electron-packager module helps us to build the binaries.
electron-packager . --platform=linux
Here we can choose our platform among darwin, Linux, Mac, and win32. Executing the above command will create a new folder with app and OS name. In this directory open the terminal:
sudo chmod +x electron-sample
./electron-sample
This will open the app, and you should see the following output:
Output:
singghakshay
sumitgumber28
ElectronJS
Picked
AngularJS
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Angular Libraries For Web Developers
Introduction to AngularJS
AngularJS | ng-src Directive
ng-content in Angular
How to force redirect to a particular route in angular?
Convert a string to an integer in JavaScript
How to calculate the number of days between two dates in javascript?
Hide or show elements in HTML using display property
Differences between Functional Components and Class Components in React
How to Open URL in New Tab using JavaScript ?