useAsDefault not working with Electron + Webpack implementation? (Angular 2)

I’ve stumbled upon a bit of a problem with an implementation of Angular 2 in Electron (desktop web-app) when using webpack as module-handler/bundler.

I’m trying to load a component as a default route when I start my application, but it seems to only be routed to when I use [routerLink], even though I specify it to be a default-route using “useAsDefault: true”. So basically what I want is the template to be shown on startup, but at this moment it’s only showed when I press the link in my todo-app.component.html.

I’ll post some snippets from the relevant code-parts and also link to a git of the project in question.—Ng2—Electron

I really appreciate any help on this, since I’ve been stuck with the same problem for hours on end now, and feels like I’ve tried everything.


/// <reference path="../node_modules/angular2/typings/browser.d.ts" />

import {bootstrap} from 'angular2/platform/browser'
import {ROUTER_PROVIDERS} from 'angular2/router'
import {HTTP_PROVIDERS} from 'angular2/http'
import {provide} from 'angular2/core';
import {APP_BASE_HREF} from 'angular2/router';
import {TodoApp} from './todo-app.component'

import 'rxjs/Rx'

bootstrap(TodoApp, [
    provide(APP_BASE_HREF, {useValue : '/' })


    <meta charset="UTF-8">
    <div class="container">
    <script src="../node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>

    <script src="../build/common.js"></script>
    <script src="../build/angular2.js"></script>
    <script src="../build/app.js"></script>

      window.jQuery = window.$ =  require('jquery/dist/jquery.min');

    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="resources/style.css">



import { Component } from 'angular2/core';
import { HTTP_PROVIDERS } from 'angular2/http';
import { RouteConfig, ROUTER_DIRECTIVES } from 'angular2/router';
import { LoginComponent } from './routes/login/login.component';
import 'rxjs/Rx'; // load the full rxjs

    selector: 'todo-app',
    templateUrl: 'todo-app.component.html',
    directives: [ROUTER_DIRECTIVES]
    { path: '/', name: 'Login', component: LoginComponent, useAsDefault: true}
export class TodoApp {}


<a [routerLink]="['Login']">todo-app</a>


app/routes/login/login.component.ts (with simple directive + template)

import { Component, OnInit } from 'angular2/core';
import { LoginFormComponent } from '../../components/login-form.component';
import 'rxjs/Rx'; // load the full rxjs

    templateUrl: './routes/login/login.component.html',
    styleUrls: ['./routes/login/login.component.css'],
    directives: [LoginFormComponent]

export class LoginComponent implements OnInit{
        console.log('login init');

Really appreciate any help with this, and hopefully someone can shed some light on what I’m doing wrong! 😀

Leave a Reply

1 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
newest oldest most voted
Notify of

I just figure it out. You need to set your LocationStrategy by using HashLocationStrategy, basically just as same as html5mode in angular1. Because you are not hosting a node server, so in your electron app, all urls should be something like: file:///your-file. The following settings should simply solve your issues.

bootstrap(AppComponent, [
provide(LocationStrategy, {useClass: HashLocationStrategy})