• Blog
  • /
  • Standalone application with Angular using Electron
on December 18, 2019
  • Others

Web applications may not be suitable in all situations. Maybe you need a desktop app rather than a web app. It is nearly impossible to create a desktop application using front end web developer languages like HTML5, JavaScript, Angular, CSS, etc.

            I said “Nearly impossible”, because this is possible. We can use the help of Electron JS to achieve this goal.

            Electron is a framework to create native desktop applications using web technologies like HTML, JavaScript, CSS, Typescript, etc.

You can build your app like a web-app using your development knowledge and can easily convert to a desktop app with the help of a few commands. It is possible to create desktop applications for Windows, Linux, and macOS. So it is cross-platform too.

Here, I will be using Angular 8 along with Electron JS to create a minimal desktop application.

Let’s begin!

Requirements

  • Basic understanding of Angular 8.
  • A good IDE or editor.
  • Pre-installed Node.js, npm

Install Angular

We need to install Angular-CLI as a first step. This will help to create our application. So, open terminal/CMD and install angular-cli using the below command

           npm install -g @angular/cli

This will install angular globally with the help of npm(Node package manager). Angular CLI can create a basic angular project with a certain directory structure to make the development easier.

Create a new project

Now we need to create a new project using the below command

          ng new angular-electron

here, ng is the abbreviation of Angular. “new” will create a new project with the name “angular-electron”.

It will contain a set of directories and files.

To test the angular project, we need to go to the angular project directory using the command,

          cd angular-electron

Then run the command,

          ng serve

This will make angular running at localhost:4200.

Go to browser and give the link http://localhost:4200. It will show the below page

So, angular is running successfully. Keep it as it is for now. You can make more changes using your coding capabilities.

Now we can go straight to electron installation and configuration.

Add electron dependency

Now we need to add the electron dependency to our angular project using the command

          npm i -D electron

Here “i” denotes “install”. We can use either “i” or “install”. -D will install the dependency as a developer dependency.

Because we don’t need electron dependency in our angular application. It will act as a dependency outside the app dependencies.

Install types for typescript

Now install types for typescript language. We need to add a typescript for electron coding.

This also will be a dev dependency. The command is

          npm i -D @types/electron

We have completed the installation of all the dependencies to create our “Angular 8 + Electron” application. Some configurations are necessary to run the electron application.

Create Electron directory

Create a directory “electron” at the root folder of the “angular-electron” application.

Then create a “tsconfig.json” file. This is the typescript configuration file which will help us to render the Typescript code which we will write soon.

You can just copy the “tsconfig.json” from the “angular-electron” directory and paste inside the “electron” directory.

I changed the “outDir” value to “./dist” and

“module” to “commonjs”. So the final file will be

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

Change index.html file

Now change the index.html file in angular root and change the line

            <base href="/">

To

            <base href="./">

This change is necessary to make the electron app to work flawlessly.

Create main.ts file

Now create a file “main.ts” inside “electron” directory. The content of the file will be

import { app, BrowserWindow } from 'electron';
import * as path from 'path';
import * as url from 'url';
import * as electron from 'electron';
let win: BrowserWindow;
// Will call createWindow function on ready
app.on('ready', createWindow);
// This code is needed for mac os as it will act differently
app.on('activate', () =>
  {
     if (win === null) {   
            createWindow(); 
     }
  });
/**
* Function to create new window.
*/
function createWindow() { 
    win = new electron.BrowserWindow(
        {   
             x: 0,   
             y: 0,   
             width: 800, // window width   
             height: 600, // window height   
             webPreferences: {       
                  nodeIntegration: true,   
              }, 
       }); 
   // uncomment below line to hide the menu bar
   // win.setMenuBarVisibility(false); 
   win.loadURL(   
       url.format({     
pathname: path.join(__dirname, `/../../../dist/angular-electron/index.html`), 
protocol: '  file:',  
slashes: true,   
}) 
   ); 
   // Uncomment below code to prevent showing the dev tools 
  // win.webContents.on('devtools-opened', () => { 
  //   win.webContents.closeDevTools(); 
  // });  
  // Uncomment below line to show the dev tools by default 
  // win.webContents.openDevTools();  
  // make window object null on close 
  win.on('closed', () => {    win = null;  });
}

If you are familiar with Typescript, then can easily understand the above code. Here the function “createWindow” will create new electron window with a height of 600 px and height of 800 px. The path name is the path to the index file to show in the electron window. This file will be created once we run the ng build command (will explain in the coming session).

Change in package.json file

Make some changes in package.json file in angular root folder.

Add the key “main” with path “electron/dist/main.js” and add a key “start:electron” under “scripts” with value “ng build –base-href ./ && tsc –p electron && electron .”. This will act as the command to run electron app.

Now the portion of package.json will looks like

 "name": "angular-electron",
  "version": "0.0.0",
  "main": "electron/dist/angular-electron/main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "start:electron": "ng build --base-href ./ && tsc --p electron && electron ."
  },

That’s it. We are done configuring our electron app with angular.

Now try running the electron app with command

          npm run start:electron

It will take some time for building the app and will open the app like below

Now enjoy creating your desktop application using angular 8.

Happy coding

Written By
Arunsankar S

Comments(0)

avatar
  Subscribe  
Notify of