Last week, I took part in the Google Developer Day held in Beijing. The Angular team introduced their new Angular 2. Angular is a development platform for building mobile and desktop web applications.

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

As recommended by Angular team, TypeScript will be used throughout this tutorial. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open source.

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

Prerequisites

Before start, please make sure that node, npm, typescript, typings are installed.

npm install -g typescript typings

Setup Electron with TypeScript

The first thing you want to do is to initialize your project using package.json:

Typings

The type definition files used by this project are managed by the "typings" TypeScript Definition Manager, version 1.0 or higher. It is not necessary to have "typings" installed just to run this application. If you haven't installed this, you'll need to install "typings" as a global NPM module:

npm install -g typings

The type definitions are committed to source control, as the `typings.json` file and the `typings` subdirectory. To get the latest type definitions, delete that file and subdirectory and replace them by running following commands:

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

The Electron Shell with TypeScript

Now comes the fun part. The normal code for creating the shell for an Electron application in JavaScript normally looks something like this:

const electron = require('electron');
// Module to control application life.
const app = electron.app;
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow;
// Keep a global reference of the window object,
// if you don't, the window will be closed automatically
// when the JavaScript object is garbage collected.
var mainWindow = null;
// Quit when all windows are closed.
app.on('window-all-closed', function() {
// On OS X it is common for applications and their
// menu barto stay active until the user quits
// explicitly with Cmd + Q
if (process.platform != 'darwin') {
app.quit();
}
});
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', function() {
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600});
// and load the index.html of the app.
mainWindow.loadURL('file://' + __dirname + '/index.html');
// Open the DevTools.
mainWindow.webContents.openDevTools();
// Emitted when the window is closed.
mainWindow.on('closed', function() {
// Dereference the window object, usually you
// would store windows in an array if your
// app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null;
});
});

The trick we want to perform is to create a TypeScript class that does essentially the same thing but using TypeScript syntax.

/// <reference path="typings/index.d.ts" />
import electron = require("electron");
let app = electron.app;
let BrowserWindow = electron.BrowserWindow;
// Global reference to the main window, so the garbage collector doesn't close it.
let mainWindow : Electron.BrowserWindow;
// Opens the main window, with a native menu bar.
function createWindow() {
// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600});
// and load the index.html of the app.
mainWindow.loadURL(`file://${__dirname}/index.html`);
// Open the DevTools.
// mainWindow.webContents.openDevTools();
// Emitted when the window is closed.
mainWindow.on("closed", () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null;
});
}
// Call 'createWindow()' on startup.
app.on("ready", () => {
createWindow();
});
// On OS X it is common for applications and their menu bar to stay active until the user quits explicitly
// with Cmd + Q.
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit()
}
});
// On OS X it's common to re-create a window in the app when the dock icon is clicked and there are no other
// windows open.
app.on("activate", () => {
if (mainWindow === null) {
createWindow();
}
});

Finally, created a HTML file named `index.html` containing following contents: