Using Angular 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: Developing with Angular.

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-electron-01

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 in your project root folder. You can generate a new one by running the following command:

npm init -y

package.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 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.

angular-electron-02

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 “View ⟶ Reload” 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: Developing with Angular.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s