convert angular 4 application to desktop application using electron

Question

I have developed application using angular 4. I need to develop desktop application for this web application . From my initial research i got the best solution is electron. Any one please suggest the steps to convert angular 4 application to electron?

Please suggest!!!

Answer 1

Assuming you have a working Angular app, i use the following steps to convert it to an electron web app:

• In src/index.html change <base href="/"> to <base href="./">
• Install electron npm install electron --save-dev
• Create main.js in root of the project (not in src) (this is where createWindow() code goes)
• Ensure main.js points to dist/index.html (not just index.html)
• add "main":"main.js", to package.json

• add these to the scripts section of the package.json

  "electron": "electron .", // <-- run electron 
  "electron-build": "ng build --prod && electron ." // <-- build app, then run electron `
  

run/debug the app with:

npm run electron-build

to build the app:

npm install electron-packager -g​​
npm install electron-packager --save-dev

then run:

electron-packager . --platform=win32​

Example main.js:

const {app, BrowserWindow} = require('electron') 
const path = require('path') 
const url = require('url') 
let win 
function createWindow () { 
win = new BrowserWindow({width: 800, height: 600}) // load the dist folder from Angular 
win.loadURL(url.format({ pathname: path.join(__dirname, 'dist/index.html'), protocol: 'file:', slashes: true })) 
// Open the DevTools optionally: 
// win.webContents.openDevTools() 
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() } })

Access to electron API functions

There's a quick and easy way to gain access to the API, which is through a package called ngx-electron.

Install it from the console:

npm install ngx-electron --save​

It has to be added to the imports array in /src/app/app.module.ts:

import { NgxElectronModule } from 'ngx-electron';

@NgModule({
  ...
  imports: [
    BrowserModule,
    NgxElectronModule   // Add it here
  ],
  ...
})
export class AppModule { }​

To use it, open /src/app/app.component.ts and add the following to the imports:

import { Component } from '@angular/core';
import { ElectronService } from 'ngx-electron';​

Then, in the component class, create an instance of it through dependency injection, which gives access to the methods of the API:

export class AppComponent {

  constructor(private _electronService: ElectronService) {}   // DI

  launchWindow() {
    this._electronService.shell.openExternal('http://google.co.uk');
  }

}

It provides you with the following functionality (Visit their Github​ for more info):

• desktopCapturer: Electron.DesktopCapturer - Electron's desktop capturing API
• ipcRenderer: Electron.IpcRenderer - Electron IpcRenderer
• remote: Electron.Remote - Electron Remote capabilities
• webFrame: Electron.WebFrame - Electron WebFrame
• clipboard: Electron.Clipboard - Clipboard API
• crashReporter: Electron.CrashReporter - Electron's CrashReporter
• process: NodeJS.Process - Electron's Process Object
• screen: Electron.Screen - Electron's Screen API
• shell: Electron.Shell - Electron's Shell API
• nativeImage: Electron.NativeImage - Electron's NativeImage API
• isElectronApp: boolean - Indicates if app is being executed inside of electron or not

Answer 2

Simple steps:

1. Build angular app (Ex.: ng build)
2. Copy the files from dist directory to electron project (index.html bundle.js etc.)
3. Run electron app