How to configure Electron to use Angular 2

February 15, 2017

Electron is an open-source framework developed by Github. It allows for the development of desktop GUI applications using Node.js runtime and the Chromium web browser. In other words is a framework for the development desktop applications with web technologies.

Examples of applications created with this technology are GitHub’s Atom and Microsoft‘s Visual Studio Code

Our first application

For build our first application we only need a few files and npm’s magic, the most important are:


We use npm as package manager so this file must have at least this lines.

    "name": "electron-angular",
    "version": "1.0.0",
    "description": "Example Electron-Angular application",
    "main": "src/main.js",
    "scripts": {
        "start": "electron ."
    "author": "Carlos",
    "license": "MIT",
    "dependencies": {

    "devDependencies": {
        "electron": "^1.4.1"


If you are familiarly with npm, you can see that we have a start command  (for execute the application) and the dependency electron.


This file is for the main code of the application, in this sample we only create a window.

const electron = require('electron');
const app =;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;

function createWindow () {

  mainWindow = new BrowserWindow({width: 800, height: 600});

  // Load the "application"
  mainWindow.loadURL('file://' + ${__dirname} + '/index.html');

  mainWindow.on('closed', function () {
    mainWindow = null

app.on('ready', createWindow);
app.on('window-all-closed', function () {

  if (process.platform !== 'darwin') {


app.on('activate', function () {

  if (mainWindow === null) {



In this file we have the graphical user interface, for this first application we only have a greeting.

<!DOCTYPE html>



    <meta charset="UTF-8">
    <title>Hello World!</title>



    <h1>Hello World!</h1>
    <!-- All of the Node.js APIs are available in this renderer process. -->
    We are using node <script>document.write(process.versions.node)</script>,
    Chromium <script>document.write(</script>,
    and Electron <script>document.write(process.versions.electron)</script>.

    // You can also require other files to run in this process


Note: You can download all this code from here

Once we have created the files, we need download the dependencies before executing the application. For that, we executed this command in a console:

npm install

Now we are ready to execute our application:

npm start

Here is our first application with electron framework.

electron framework

Adding angular

Now it’s time to add angular 2 in our application.

First step is insert angular 2 and typescript dependencies in package.json.

"dependencies": {
        "@angular/common": "~2.1.1",
        "@angular/compiler": "~2.1.1",
        "@angular/core": "~2.1.1",
        "@angular/forms": "~2.1.1",
        "@angular/http": "~2.1.1",
        "@angular/platform-browser": "~2.1.1",
        "@angular/platform-browser-dynamic": "~2.1.1",
        "@angular/router": "~3.1.1",
        "@angular/upgrade": "~2.1.1",
        "angular-in-memory-web-api": "~0.1.13",
        "bootstrap": "^3.3.7",
        "core-js": "^2.4.1",
        "reflect-metadata": "^0.1.8",
        "rxjs": "5.0.0-beta.12",
        "systemjs": "0.19.39",
        "zone.js": "^0.6.25",
        "plugin-typescript": "^5.3.1",
        "typescript": "^2.1.4"    

Of course, we need execute npm install to download the dependencies.

As we are using angular 2, we need configure the using of typescript. For that we create a new file named tsconfig.json with a typical typescript configuration.


  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false


Second step is to change our index.html to use angular:

<!DOCTYPE html>



    <title>Hello Angular</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

      body {color:#369;font-family: Arial,Helvetica,sans-serif;}
    <!-- Polyfills for older browsers -->
    <script src="../node_modules/core-js/client/shim.min.js"></script>
    <script src="../node_modules/zone.js/dist/zone.js"></script>
    <script src="../node_modules/reflect-metadata/Reflect.js"></script>
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
    <script> window.autoBootstrap = true; </script>
    <script src="systemjs.config.js"></script>
      System.import('app').catch(function(err){ console.error(err); });

    <my-app>Loading AppComponent content here ...</my-app>

    // You can also require other files to run in this process


One big thing is missing, our angular 2 application. To do that, we create a new file app/app.component.ts.

import { Component } from '@angular/core';

  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`

export class AppComponent { name = 'Angular'; }

Last thing is adding a standard systemjs.config.js to our project.

All the code is available in

Generate executable

At this point we are using npm to execute our application, if we want to share our application we need a better way. This way is using electron-builder, which is a complete solution to package and build a ready for distribution Electron app for macOS, Windows and Linux with “auto update” support out of the box.

Electron-builder needs info about our project, in pakage.json we must add:

    "build": {
        "appId": "mimacom",
        "mac": {
            "category": "apps"

We must not forget adding the dependency

"devDependencies": {
    "electron": "^1.4.1",
    "electron-builder": "^10.8.1"

After install the dependency, we can use this command:

node_modules\.bin\build –w

Now we have our application packaged and ready to share.

More info and options about electron-builder are showed with this command:

node_modules\.bin\build –help

All code is available in

About the author: Carlos García
Join us