Building Angular Electron Application
Tags: angular, electron, typescript, beginners
Published: 2022-08-22 12:54:00


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7dacz0i76c6nuuu7287p.png)

## Introduction
Electron is a free and open-source framework that is developed and maintained by GitHub. You can utilize this framework to design desktop applications using the web technologies such as HTML, JavaScript, CSS as well as other frontend frameworks and Web Assembly. Electron is used to design the desktop-based application which can be used for Linux, Windows, and macOS. Using the electron packager tool, we can create a desktop executable file of the application having the combination of Electron and Angular. In this article, we will design a desktop application using Angular and Electron which can be utilized for the Cross Platform.

In this article, we will learn to create the first angular electron application.

[Source code](https://github.com/SatyaKarki/DemoAngularElectron)
**Prerequisites**

- Knowledge of Angular and TypeScript
- Node.js and npm should be installed
- IDE for Angular (Visual Studio or Visual Studio Code)

As Node.js and npm are prerequisites and I have already those in my machine so let’s kick up from the angular app creation.

## Create Angular App
Run the following command to install the latest version of Angular CLI.

`npm install -g @angular/cli`

Create an angular project using the below command.

`ng new myRijSatApp`

Go to the app directory.

`cd  myRijSatApp`

You can run _ng serve_ command to open the Angular application in the browser.

You can run and see the application in your browser at http://localhost:4200/

## Installing Electron

First, we have to install electron. Below cmd installs Electron as a development dependency in the project. Run the command to install it.

`npm install –save-dev electron@latest`

Next, open your project in any of your familiar angular IDE and add an app.js file inside the root folder of your project as shown below. I am using Visual for this purpose.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hvb5oc8fy3xvato4n0p9.png)


Rename the newly added JS file to app.js and write the following code inside it.

The Code of app.js is given below.

```
const {app, BrowserWindow} = require('electron')
    const url = require("url");
    const path = require("path");

    let mainWindow

    function createWindow () {
      mainWindow = new BrowserWindow({
        width: 900,
        height: 700,
        webPreferences: {
          nodeIntegration: true
        }
      })

      mainWindow.loadURL(
        url.format({
          pathname: path.join(__dirname, `/dist/myRijSatApp/index.html`),
          protocol: "file:",
          slashes: true
        })
      );
      // Open the DevTools. If you don't want you delete this
      mainWindow.webContents.openDevTools()

      mainWindow.on('closed', function () {
        mainWindow = null
      })
    }

    app.on('ready', createWindow)

    app.on('window-all-closed', function () {
      if (process.platform !== 'darwin') app.quit()
    })

    app.on('activate', function () {
      if (mainWindow === null) createWindow()
    })
```
In the above code, CreateWindow method creates the Window of your application where you can define the size of your application(height, width), and path. It loads the index page of your application in the window.

The next step is, we need to open the package.json file and add the app.js as the main as illustrated below.

`"main": "app.js",`


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qa31hsi8hedixvts7ynb.png)

The next step is to modify the Start script as shown below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sr43higjmen4fvense58.png)

Now, we can run and see the application.

`npm start`

After running the app, if you get a blank screen with the below error.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cca7r2k7b9wqoqg6osxd.png)

Then check your directory path and provide the correct directory path for index.html page in your app.js file.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ra209l1leahkb64yffgm.png)

Try again running the below command to launch your first Angular electron application.

`npm start`

Once you run, the output of your first electron app will be like the image illustrated below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4e4plwcqzipog4um7qv.png)

## Adding a new Component
Adding new components is almost similar to Angular web application development which I will demonstrate shortly below.

You can run the below command to add a new login component.

`ng g c login`


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v26q2s819bxcfxsydfli.png)

Add login component in the app-routing.module.ts as shown.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gknof3yaikkxk8h6gb64.png)
Also, add it in the app-component.html.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kf20hvzzb9sb2q2fpwbr.png)

Now, you can design your login page and run the app and check it. You can clean up the default design and add other components accordingly. Hence, you can change the design and customize the application as per your need.

## Conclusion
In a nutshell, we created angular and electron application as well as got familiar with desktop application development for cross-platform. Moreover, the article has described what is an electron and how to create the first cross-platform desktop application that can be utilized for Linux, Windows, and macOS using a combination of angular and electron.

In the next part of the article, we will learn about packaging or releasing the angular and electron desktop applications for the major operating systems such as Windows, Linux, and macOS.

**Reference**

1. [Rijsat.com](https://rijsat.com/2022/05/05/getting-started-with-angular-electron-application/)