Getting Started Electron with Angular

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

Prerequisites

Before getting started with the Angular project with Syncfusion Angular Components in Electron, check whether the following are installed in the developer machine.

• Angular Versions supported - 4+
• Typescript Versions supported - 2.6+
• Electron CLI - 6.0.10+

Note: If the electron CLI is not installed, refer to getting started with electron to install it.

Setup Angular environment

You can use Angular CLI to setup your Angular applications. To install Angular CLI use the following command.

npm install -g @angular/cli

Create an application

Create a new project with the following command using the command prompt.

ng new my-app
cd my-app

Install electron framework using the following command

npm install -g electron

Note: Here we are using electron version 6.0.10 to support angular 6 .

Note: Also refer the below getting started to install electron framework.

Installing Syncfusion Menu package

Syncfusion packages are distributed in npm as @syncfusion scoped packages. You can get all the angular syncfusion package from npm link.

To install Menu package, use the following command.

npm install @syncfusion/ej2-angular-navigations --save
(or)
npm i @syncfusion/ej2-angular-navigations --save

Adding Menu module

After installing the package, the component modules are available to configure into your application from Syncfusion installed package. Syncfusion Angular package provides two different types of ng-Modules.

Refer to Ng Module to learn about ngModules.

Import Menu module into Angular application(app.module.ts) from the package @syncfusion/ej2-angular-navigations.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// Imported Syncfusion menu module from navigations package.
import { MenuModule } from '@syncfusion/ej2-angular-navigations';

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, MenuModule], // Registering EJ2 Menu Module.
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

Adding Syncfusion Menu component

Modify the template in app.component.ts file with ejs-menu to render the Menu component.

import { Component } from '@angular/core';
import { enableRipple } from '@syncfusion/ej2-base';
import { MenuItemModel } from '@syncfusion/ej2-angular-navigations';

enableRipple(true);

@Component({
    selector: 'app-root',
    template: `<!-- To Render Menu. -->
            <ejs-menu [items]='menuItems'></ejs-menu>`
})

export class AppComponent {
    public menuItems: MenuItemModel[] = [
        {
            text: 'File',
            items: [
                { text: 'Open',  url: 'https://www.google.com/search?q=washing+machine' },
                { text: 'Save' },
                { text: 'Exit' }
            ]
        },
        {
            text: 'Edit',
            items: [
                { text: 'Cut' },
                { text: 'Copy' },
                { text: 'Paste' }
            ]
        },
        {
            text: 'View',
            items: [
                { text: 'Toolbar' },
                { text: 'Sidebar' }
            ]
        },
        {
            text: 'Tools',
            items: [
                { text: 'Spelling & Grammar' },
                { text: 'Customize' },
                { text: 'Options' }
            ]
        },
        { text: 'Go' },
        { text: 'Help' }
    ];
}

Adding CSS reference

Add Menu component’s styles as given below in style.css.

@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";

Create main.js file

Create a main.js file in the root folder of the project and add the following code in main.js file

const { app, BrowserWindow } = require('electron');
let win;
function createWindow () {     
// Create the browser window.
win = new BrowserWindow({ width: 800, height: 600 });
// and load the index.html of the app. 
win.loadFile('./dist/my-app/index.html');
// Open the DevTools.
win.webContents.openDevTools();
// Emitted when the window is closed.
win.on('closed', () => {       
   win = null     
  })
};      
// This method will be called when Electron has finished   
// initialization and is ready to create browser windows.   
// Some APIs can only be used after this event occurs.   
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', () => { 
// On macOS it is common for applications and their menu bar     
// to stay active until the user quits explicitly with Cmd + Q     
if (process.platform !== 'darwin') {
app.quit()
}   
});

app.on('activate', () => {     
// On macOS it's common to re-create a window in the app when the     
// dock icon is clicked and there are no other windows open.     
if (win === null) {
createWindow()
}   
});  

Update index.html

In the /src/index.html file, change <base href="/"> as <base href="./">. Then only the Electron will able to find the Angular files.

Update package.json

"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 --prod", 
    "electron": "electron ." 
}, 

Then, Include the above code in package.json file.

Update tsconfig.json

In tsconfig.json file, change the target as

"target": "es5"

Running the application

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