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!!!

Imtiaz

This question is waaaaay too broad. – Terminus

i didn't get. Actually its my doubt – Imtiaz

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

Nicollenicolson

Thanks dude, its saved a lots of time – Ectophyte

I got tons of errors following these instructions. Here is only the first one... ERROR in src/app/app.module.ts:19:5 - error NG6001: Cannot declare 'NgxElectronModule' in an NgModule as it's not a part of the current compilation. – Sawhorse

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

Electrophysiology

i followed the step and created electron app But the css and images are not loading in electron app Example : file:///C:/assets/css/custom.css is not found – Imtiaz

in the index.html there is a <base href=/> tag; just play with the href attribute. For example href="./" – Electrophysiology

Answer 3

I have just successfully built a desktop app from an angular application, and below are the steps :

1. Change directory to your angular app and install electron

cd my-angular-app/
  
npm i -D electron@latest

2. Create electron entry file create a main.js file in the root directory of your project. This file will be the main entry point for the electron app and will contain the main API for the desktop app.

main.js content:

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'), // compiled verion of our app
      protocol: "file:",
      slashes: true
    })
  );
  // The following is optional and will open the DevTools:
  // win.webContents.openDevTools()
  win.on("closed", () => {
    win = null;
  });
}
app.on("ready", createWindow);
// on macOS, closing the window doesn't quit the app
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

3. update package.json with your app details

Update the package.json file to point to electron main entry point, and fill in information about your app (app name, version, description, and author)

package.json

{
  "name": "my-angular-app",
  "version": "0.0.1",
  "main": "main.js",
  "author" : "my-name",
  "description": "The app is about foo and bar",
  ...
}

4. Update the script in the package.json

Add a new NPM script which will first create a build and then launch the desktop application from the dist folder.

{
  ...
  "scripts": {
   "electron": "ng build --base-href ./ && electron .",
   ...
  }
 ...
}

5. Update angular to set the build directory

In angular.json, set the build directory as we have set /dist/index.html in the main.js file.

...,
"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist",

6. run the app All things being equal, you should see the app lunched within a desktop window now after running the run command:

npm run electron

7. Building (packaging) the APP :

With tooling

You can use the following tools to distribute your application:

1. electron-forge

2. electron-builder

3. electron-packager

These tools will take care of all the steps you need to take to end up with a distributable Electron application, such as bundling your application, rebranding the executable, and setting the right icons.

Below is how you can package with electron-forge

1. Add Electron Forge as a development dependency of your app, and use its import command to set up Forge's scaffolding:

npm install --save-dev @electron-forge/cli
npx electron-forge import

2. Create a distributable using Forge's make command:

npm run make

Electron Forge creates the out folder where your package will be located:

// Example for macOS
out/
├── out/make/zip/darwin/x64/my-electron-app-darwin-x64-1.0.0.zip
├── ...
└── out/my-electron-app-darwin-x64/my-electron-app.app/Contents/MacOS/my-electron-app

I hope this helps a lot of people.

Omaomaha