Using Angular 2 with Electron

This article will show you how to configure and use Angular components with Electron framework for creating cross-platform applications with web technologies.

You will get a link to finished working example hosted at GitHub at the end of the article.

You can get more practical information on the Angular development in the agile book I’m working on:

Electron quick start

The Quick Start guide should be more than enough to get started. Just follow the tutorial or get the finished result:

# Clone the repository 
git clone https://github.com/electron/electron-quick-start

# Go into the repository
cd electron-quick-start
# Install dependencies and run the app 
npm install && npm start

You should see something like the following:

Angular quick start

Most of the steps needed to wire Angular with Electron can be taken from the Angular 5 min quickstart guide. This article will focus on bare minimum you may want to take.

Project configuration

Put the following files at your project root folder. You can generate a new one by running the following command: npm init -y

package.json

Note the changes start script, instead of running a web server you will be launching prebuilt electron instance for npm start command:

{     
"start": "tsc && concurrently \"npm run tsc:w\" \"electron .\" "
}

You will need installing new libraries once updating your package.json file:

npm install

By default Electron quickstart project is configured to show Developer Tools on startup. You can disable this behaviour in main.js file if needed:

function createWindow () {     
...
// Open the DevTools.
// mainWindow.webContents.openDevTools()
...
}

You will still be able opening Developer Tools via “ViewToggle Developer Tools”.

tsconfig.json

Please note the exclude option. This setting greatly improves performance when using Atom or IntelliJ for development.

systemjs.config.js

index.html

Simple Angular 2 application

This step does not differ from the Step 2: Our first Angular component chapter of the 5 min quickstart. Please check original article for more details on implementation.

Create an app subfolder at project root directory to hold the following files:

app/app.module.ts

app/app.component.ts

app/main.ts

Running application

Now you are ready to run your application:

npm start

The start command compiles your TypeScript code and launches Electron instance with your application getting loaded automatically.

Also note that start command runs TypeScript compiler in watch mode. Every time you change your code it should be enough just reloading Electron via “ViewReload” or with Cmd-R (Ctrl-R on Windows).

Source code

You can the get full source code for this article from this GitHub repository: ng2-electron.

You can get more practical information on the Angular development in the agile book I’m working on: