Building an electron app using Angular2 Beta0 in TypeScript

Building an electron app using Angular2 Beta0 in TypeScript

A couple of weeks ago I created a sample repository for demonstrating the usage of ng2 in electron apps when writing ES2015.

Today I've investigated some time in building a electron showcase app which explains how to create desktop apps using angular2 (currently beta0) when relying on TypeScript.

Some friends of mine know that I don't like TypeScript :D but ng2 is currently pushing developers in that direction. Of course everything could be done using plain old JavaScript but when creating apps using TypeScript there is less plumbing and you can save a lot of keystrokes. (THINK: less keystrokes -> less time spent -> more spare time :D)

So the repository is out there on github at, as everytime I've build a small gulpfile.js which takes care about all the transpiling, copying and other required build steps to generate the electron app for all three platforms (windows, linux and of course OSX)

By using gulp-typescript you can easily compile the TypeScript sources to plain JavaScript which will be managed by SystemJS at runtime. There is nothing special in the gulpfile when comparing it to other samples I've published earlier when not using TypeScript, so I'll skip that for now.

More important are some pitfalls when combining ng2 with electron. There are plenty demo applications available out there. But a quick google didn't bring up a single sample using angular's new component router.

As mentioned within angular's developer guide on, the router requires a <base href="/foo"/> or <base href="/"> in order to work as expected. If you don't add the base node within <head> ng2 will throw an error like shown in figure 1.

ng2 missing base href

Adding the base node works fine when running inside of the browser but it prevents the app from finding the routes when executing the same source in electron. But there is hope (as always :D). You can alternatively configure the base within your app bootstrap routine.

This is required when you're loading scripts from within electrons renderer process.

Snippet 1 shows the boot.ts file which is responsible for bootstrapping our ng2 app

import {provide} from 'angular2/core';  
import {bootstrap}    from 'angular2/platform/browser';  
import {AppComponent} from './components/app/app.component';  
import {ROUTER_PROVIDERS, APP_BASE_HREF} from 'angular2/router';

bootstrap(AppComponent, [ROUTER_PROVIDERS,  
     provide(APP_BASE_HREF, {useValue : '/'})]);

The important and new part here is the usage of provide to tell angular where the new base is. But there is more required. ng2 is offering a Location service which is responsible for interacting with browser's URL. Check out app.component.ts (Snippet 2), the RouteConfig can take an optional useAsDefault property of type boolean. Setting this to true works fine when not using provide but the combination of provide and useAsDefault: true didn't work for me here. That's why I used the Location service (provided by angular's DI container) to redirect the user immediately to the Splash Component.

import {Component} from 'angular2/core';  
import {RouteConfig, ROUTER_DIRECTIVES, Location} from 'angular2/router';  
import {SplashComponent} from "../splash/splash.component";

    selector: 'sampleapp',
    templateUrl: 'templates/app.html',
    directives: [ROUTER_DIRECTIVES]
    {path: '/splash', name: 'Splash', component: SplashComponent}
export class AppComponent {

    constructor(private _location: Location){ 


Within the current public available version of this sample. I've to load the splash template by using the plain template property, when using templateUrl as I did for the app.component.ts angular2 isn't able to find the template. For now, it seems like the template will be requested after the AppBaseHref is set and in combination with electron's path handling ng2 isn't able to find the template at a given URL.

Action required ;-)

If you've any idea how to fix that feel free to send me a pull request on github or chat with me about it.


My coworker @ManuelRauber (see his posts on ng2 too) already provided a fix as pull request for the described issue. He added the HashLocationStrategy to the sample, which will make angular find the template again \0/


comments powered by Disqus