This document helps you to create a simple Angular application with Electron Framework and Syncfusion Angular UI components.

Before getting started with the Angular project, make sure you have the following installed on your machine,

• System requirements for Syncfusion Angular UI components
• Electron CLI version - ^22.x.x or later

If you do not have the Electron CLI installed, refer to the Electron package for instructions on how to install it.

Follow the documentation to create an Angular application that includes Syncfusion Angular components.

Create a main.js file in the root folder of the project and update the below code, This file will serve as an entry-point for Electron and it is responsible for creating windows and handling all the system events that might occur in the app.

const { app, BrowserWindow } = require('electron');
let win;

function createWindow() {
  win = new BrowserWindow({ width: 800, height: 600 });

  // Load the Angular app in the browser window
  win.loadFile('./dist/sample15/index.html');

  win.on('closed', () => {
    win = null;
  });
}

app.on('ready', createWindow);

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

app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});

In the /src/index.html file, change <base href="/"> to <base href="./">, so that the Electron can able to find the Angular files.

Go to your root directory and find the package.json file. Open its content and add the following,

"main":"main.js",
"scripts": { 
    "ng": "ng", 
    "start": "ng serve", 
    "build": "ng build", 
    "test": "ng test", 
    "lint": "ng lint", 
    "e2e": "ng e2e", 
    "electron-build": "ng build --configuration=production",
    "electron": "electron ." 
}, 

Finally, run the following command line to start the application. The Syncfusion Essential JS 2 menu component will be rendered in the Electron framework.

npm  run electron-build 

npm  run electron