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. https://github.com/viktorgullmark/TodoApp—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.

app/app.ts

/// <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, [
    ROUTER_PROVIDERS, HTTP_PROVIDERS,
    provide(APP_BASE_HREF, {useValue : '/' })
]);

app/index.html

<html>
  <head>
    <meta charset="UTF-8">
    <title>angular2-electron</title>
  </head>
  <body>
    <div class="container">
      <todo-app></todo-app>
    </div>
    <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>

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

    <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">

  </body>
</html>

app/todo-app.component.ts

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

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

app/todo-app.component.html

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

<router-outlet></router-outlet>

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

@Component({
    templateUrl: './routes/login/login.component.html',
    styleUrls: ['./routes/login/login.component.css'],
    directives: [LoginFormComponent]
})

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

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

1
Leave a Reply

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

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, [
ROUTER_PROVIDERS,
provide(LocationStrategy, {useClass: HashLocationStrategy})
]);