You can use Electron to configure an Angular app to launch on a desktop window, instead of the usual web browser. You can do this using a JavaScript file within the app itself.

Once you configure Electron, you can continue development as you would on a regular Angular app. The main parts of the application will still follow the same standard Angular structure.

How to Install Electron as Part of Your Application

To use Electron, you need to download and install node.js, and use npm install to add Electron to your app.

Download and Install node. js. You can confirm you have installed it properly by checking the version: node -v Node also includes npm, the JavaScript package manager. You can confirm you have npm installed by checking the npm version: npm -v Create a new Angular application using the ng new command. This will create a folder that contains all the necessary files required for an Angular project to work. ng new electron-app In the root folder of your application, use npm to install Electron. npm install –save-dev electron This will create a new folder for Electron in the node_modules folder of the app. You can also install Electron globally on your computer. npm install -g electron

The File Structure of the Angular Electron Application

Electron will require a main JavaScript file to create and manage the desktop window. This window will display the contents of your app within it. The JavaScript file will also contain other events that can occur, such as if the user closes the window.

At runtime, the content displayed will come from the index.html file. By default, you can find the index.html file inside the src folder, and at runtime a built copy of it is automatically created inside the dist folder.

The index.html file usually looks like this:

Inside the body tag is an tag. This will display the main app component for the Angular application. You can find the main app component in the src/app folder.

How to Use Electron to Open an Angular Application in a Desktop Window

Create the main.js file, and configure it to open the application’s content inside a desktop window.

Create a file in the root of your project named main. js. In this file, initialize Electron so that you can use it to create the application window. const { app, BrowserWindow } = require(’electron’); Create a new desktop window of a certain width and height. Load the index file as the content to display in the window. Make sure the path to the index file matches the name of your app. For example, if you named your app “electron-app”, the path will be “dist/electron-app/index. html”. function createWindow() {  win = new BrowserWindow({width: 800, height: 800});  win. loadFile(‘dist/electron-app/index. html’);} When the app is ready, call the createWindow() function. This will create the application window for your app. app. whenReady(). then(() => {  createWindow()}) In the src/index. html file, in the base tag, change the href attribute to “. /”.

In package. json, add a main field, and include the main. js file as the value. This will be the entry point for the app, so that the application runs the main. js file as it launches the app. {  "name": "electron-app",  "version": "0. 0. 0",  "main" : "main. js",  . . . . } In the . browserslistrc file, modify the list to remove iOS safari versions 15. 2-15. 3. This will prevent compatibility errors from showing in the console when compiling. last 1 Chrome versionlast 1 Firefox versionlast 2 Edge major versionslast 2 Safari major versionslast 2 iOS major versionsFirefox ESRnot ios_saf 15. 2-15. 3not safari 15. 2-15. 3 Delete the default content in the src/app/app. component. html file. Replace it with some new content.
  
    

Home

    

      Welcome to my Angular Electron application!    

  
Add some styling for the content in the src/app/app. component. css file. . content {  line-height: 2rem;  font-size: 1. 2em;  margin: 48px 10%;  font-family: Arial, sans-serif}. card {  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0. 2);  width: 85%;  padding: 16px 48px;  margin: 24px 0px;  background-color: whitesmoke;  font-family: sans-serif;} Add some overall styling to the src/styles. css file to remove the default margins and paddings. html {  margin: 0;  padding: 0;}

How to Run an Electron Application

To run your application in a window, configure a command in the scripts array of package.json. Then, run your app using the command in the terminal.

In package. json, inside the scripts array, add a command to build the Angular app and run Electron. Make sure you add a comma after the preceding entry in the Scripts array. “scripts”: {  . . .   “electron”: “ng build && electron . “}, To run your new Angular application in a desktop window, run the following in the command line, in the root folder of your project: npm run electron Wait for your application to compile. Once completed, instead of your Angular app opening in the web browser, a desktop window will open instead. The desktop window will show the contents of your Angular app. If you want to still view your application in the web browser, you can still run the ng serve command. ng serve If you are using the ng serve command, the contents of your app will still display in a web browser at localhost:4200.

Building Desktop Applications With Electron

You can use Electron to build desktop applications on Windows, Mac, and Linux. By default, you can test an Angular application using a web browser via the ng serve command. You can configure your Angular application to also open in a desktop window instead of a web browser.

You can do this using a JavaScript file. You will also need to configure your index.html, and package.json files. The overall application will still follow the same structure as a regular Angular application.

If you want to learn more about how to build desktop applications, you can also explore Windows Forms apps. Windows Forms apps allow you to click and drag UI elements onto a canvas while also adding any coding logic into C# files.