Electron+Angular 4 - Part 2 | 7CTECH

Electron+Angular 4 – Part 2

Get Quote

Electron+Angular 4 – Part 2

Last time we had created an Electron app to the basic level and you were able to open the application on your platform (Windows /Mac ,Linux etc) so you must be thinking that were is the angular in the whole thing.

Lets not wast the time and get to it.

Change some config

Go ahead and open the Package.json file and just remove everything and add the following text.It is almost the same with just a little bit of difference that I explain in a moment.

  "name": "my-cool-electron-app",
  "version": "0.0.1",
  "description": "Electron js Angular 4 and Typescript",
  "homepage": "",
  "main": "main.js",
  "scripts": {
	"build": "tsc -p src/",
	"serve": "lite-server -c=bs-config.json",
	"startng": "concurrently \"npm run build\" \"npm run serve\" " ,
       "start": "electron ."
  "dependencies": {
    "angular-in-memory-web-api": "~0.3.0",
    "@angular/common": "~4.0.0",
    "@angular/compiler": "~4.0.0",
    "@angular/core": "~4.0.0",
    "@angular/forms": "~4.0.0",
    "@angular/http": "~4.0.0",
    "@angular/platform-browser": "~4.0.0",
    "@angular/platform-browser-dynamic": "~4.0.0",
    "@angular/router": "~4.0.0",
    "core-js": "~2.4.1",
    "ngx-electron": "0.0.11",
    "rxjs": "~5.1.0",
    "zone.js": "~0.8.4"
  "devDependencies": {
    "concurrently": "^3.2.0",
    "lite-server": "^2.2.2",
	"canonical-path": "0.0.2",
    "@angular/compiler-cli": "~4.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "copyfiles": "^1.2.0",
    "electron": "1.6.2",
    "electron-packager": "~8.6.0",
    "electron-prebuilt": "~1.4.13",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"

Now if you pay a little attention you will be able to see what the changes are. Well if you do or don't let me explain that anyways. We added these in the DevDependencies. "concurrently": "^3.2.0", "lite-server": "^2.2.2", "canonical-path": "0.0.2", These are for serving angular , concurrent compilation or running few commands together (note I am keeping it very simple for the very basic learners) and using it for canonical path in files. We also changed the "script section": "build": "tsc -p src/", "serve": "lite-server -c=bs-config.json", "startng": "concurrently \"npm run build\" \"npm run serve\" \"electron .\"", Here we are adding three commands for the node or npm , build (here we are telling the typescript transpiler to do transpilation on "src" folder) , Serve (here we are getting the angular to run.Note the bs-cinfig.json file I will explain in a moment) and the last one is "startng" here we are running three different commands concurrently which are build the app, server it and then run the electron.

Add the Angular

Till this stage we have effectively have an angular application that dose not work :). Well worry not it is because we are almost done with basic config but not have added angular application in our mix. Go ahead and run following command while being in the command prompt or terminal in the same folder which is the root of your app.

npm install

This will add and configure the new things that we added into the package.json. Now add this file in the project.


And add following code into it:

  "server": {
    "baseDir": "src",
    "routes": {
      "/node_modules": "node_modules"

It is very simple.We are telling what is the base (root) directory for the angular app and what is the root directory for the node modules. Now you can download the Angular 4 using Git and you just clone the repo.

git clone https://github.com/angular/quickstart.git quickstart

or you can just clone my repo and it is a full solution. I will talk about that at the end of this. Right now if you have downloaded/cloned the whole quickstart folder then copy the src folder from the quickstart folder to your applications root folder. Technically we are all set now so lets give it a spin. Open the command prompt/terminal and navigate to your root folder. and run following command.

npm run startng

That should just start Angular JS as it is usually.Now we got the Anguelar in it Yayy. Lets do some tweaking into the electron to load the Angular. Find the place where you have declared "URL" like var url and change that whole line with this one let url = 'http://localhost:3000/';. This line is telling electron that rather then loading the basic HTML file we had made now load this url. Okay if you have the above client still running if not then open up the command prompt and rung it again once done open another command prompt/terminal and run this command.

npm run start

Once you do this there is a surprise we got the electron running and having Angular 4 loaded right inside it. how cool is that? Next Step here is to make a link between Electron and Angular and understand how do they communicate together and how do they talk to each other and how you can utilize that for you awesome idea.

Now lets send a message from the desktop "hosting" code towards the loaded angular application.First thing is lets add a internal message (inter application) handling module into angular application. Electron comes with it by default nothing to worry about it . Run this while being in your SRC folder.

npm install ngx-electron --save

Now follow following steps and you should be able to get the front end(Angular) to communicate with the back end (electron).

1- Add the ngx-electron in your angular Module file like this:

import {NgxElectronModule} from 'ngx-electron';

2- Add the module in the imports as well in the same file.

3- Go to your component.ts file and Import the service like this:

import {ElectronService} from 'ngx-electron';

4- Inject the imported service in constructor.

constructor(private _electronService: ElectronService)

5- Lets send a message to electron when our constructor for Angular application is done running. Add following line of code right before your constructor ends.

this._electronService.ipcRenderer.send("async","hello from Angular");
<p>6- Now open your main electron file which is "main.js" right in your Root directory. And add this line of code at the top right under the place where you have initialized the broswerwindow object:</p>
const {ipcMain}= electron;

7- Since we have the IPC object ready now lets receive some stuff from Angular at the end of you "createwindow" function add these lines:

ipcMain.on('async', (event, arg) => {
    fs.writeFile("hello.txt", arg, function(err) {
    if(err) {
        return console.log(err);

    console.log("The file was saved!");

You must be wondering what is FS here !!! Well that is File service that comes along node but you can not use it in Angular (remember!) that is why Electron is there to do the native desktop stuff for you. All you have to do is add this line right after where you initialized the IPC object.

var fs = require('fs');

Go ahead and run this as we discussed a moment ago (npm start etc) and you should have a file in your root directory with name "hello.txt" and you should be happy to see that. Here you are using Angular4 in your desktop application like a champ. You can get a ready example of everything that we did here form this Git repo.

I hope this helps you out. Keep coming back to 7CTECH to learn new things every now and then.