Angular library that provides integration with Electron.

npm install @ngstack/electron

Then import the ElectronModule into your application

import{ElectronModule}from'@ngstack/electron'; @NgModule({imports: [ ...,ElectronModule],declarations: [...],providers: [...],bootstrap: [AppComponent]})exportclassAppModule{}

• detects when application is running with Electron
• provides access to IpcRenderer and cross-process communication
• runs channel listeners within NgZone
• does not affect the traditional Web applications

Inject the ElectronService instance into your component and use ElectronService.on method:

@Component({...})exportclassAppComponentimplementsOnInit{constructor(privaterouter: Router,privateelectron: ElectronService){}ngOnInit(){this.electron.on('app:navigateRoute',(event: any, ...args: string[])=>{this.router.navigate([...args]);});}}

Example above setups an app:navigateRoute channel listener, and uses Router to navigate to the requested route automatically.

Now, in the Electron application shell you can request navigation like in the following example:

BrowserWindow.getFocusedWindow().webContents.send('app:navigateRoute','/about');

Note that the ElectronService.on method has no effect in the traditional Web apps, but you can still use it to have source code compatibility with the packaged scenarios.

Inject the ElectronService instance into your component and use ElectronService.send method:

@Component({...})exportclassAppComponent{constructor(privateelectron: ElectronService){}onButtonClicked(event: any,parameter: string){this.electron.send('app:doSomething',parameter);}}

Now, in the Electron application shell you can request navigation like in the following example:

ipcMain.on('app:doSomething',(event,parameter)=>{// your custom code with optional access to parameter passed from the web app});

Note that the ElectronService.send method has no effect in the traditional Web apps, but you can still use it to have source code compatibility with the packaged scenarios.