Angular 2 Router broken since version alpha 34

Question

I have been playing around with Angular2 for quite a while. All the code is bleeding edge and using the latest TypeScript Nightly 1.6 and Angular alpha 34. I am unable to call the parent router from one of the Components. Please help me if possible. Herewith I am attaching the code and the error on navigation attempt.

app.ts

/// <reference path="../typings/angular2/angular2.d.ts" />
'use strict';
import {Component, View, bootstrap} from 'angular2/angular2';
import {routerInjectables, RouterOutlet, RouteConfig} from 'angular2/router';
import {LoginApp} from './login/login';
import {DashboardApp} from './dashboard/dashboard';
// Annotation section
@Component({
    selector: 'inventman-app'
})
@View({
    template: `<!-- The router-outlet displays the template for the current component based on the URL -->
    <router-outlet></router-outlet>`,
    directives: [RouterOutlet]
})
@RouteConfig([
    { path: '/', redirectTo: '/login' },
    { path: '/dashboard', as: 'dashboard', component: DashboardApp },
    { path: '/login', as: 'login', component: LoginApp }
])
// Component controller
export class InventmanApp {
    constructor() {
    }
}

// bootstrap the Main App
bootstrap(InventmanApp,
    [
        routerInjectables
    ]);

login.ts

/// <reference path="../../typings/angular2/angular2.d.ts" />
'use strict';
import {Component, View, formDirectives} from 'angular2/angular2';
import {Router} from 'angular2/router';
import {HttpService} from '../../services/httpservice/httpservice';
@Component({
    selector: 'login-app'
})
@View({
    templateUrl: './jsts/components/login/login.html',
    directives: [formDirectives],
    styleUrls: ['./jsts/components/login/login.css']
})
export class LoginApp {
    username: String;
    password: String;
    constructor(public router: Router) {
    }
    onSubmit() {
        const username = this.username, password = this.password;
        HttpService.serve('https://' + location.host + '/userapi/sessions/create', 'POST', {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }, JSON.stringify({ username, password }))
            .then(response=> {
                if (!response.id_token) {
                    // Alerts the actual message received from the server
                    alert(response.message);
                    // Removes any previous assigned JWT to ensure tighter security
                    localStorage.removeItem('jwt');
                }
                else {
                    // Valid Login attempt -> Assign a jwt to the localStorage
                    localStorage.setItem('jwt', response.id_token);
                    // route to the dashboard
                    this.router.parent.navigate('/dashboard');
                }
            });
    }
}

Error

EXCEPTION: TypeError: Cannot read property 'parent' of undefined angular2.dev.js:22448 STACKTRACE: angular2.dev.js:22448 TypeError: Cannot read property 'parent' of undefined at eval (login.js:34) at Zone.run (angular2.dev.js:136) at Zone.execute.$__3._createInnerZone.zone.fork.fork.$run [as run] (angular2.dev.js:16437) at zoneBoundFn (angular2.dev.js:109) at lib$es6$promise$$internal$$tryCatch (angular2.dev.js:1359) at lib$es6$promise$$internal$$invokeCallback (angular2.dev.js:1371) at lib$es6$promise$$internal$$publish (angular2.dev.js:1342) at angular2.dev.js:187 at Zone.run (angular2.dev.js:136) at zoneBoundFn (angular2.dev.js:109)

What if you add this.router = router; in the constructor? Besides that, apparently there are other issues with router in alpha34 — Eric Martinez
Obviously I did it. You can access the entire repo now in github at : github.com/debanjanbasu/inventman — user2379441
To run it just run: mongod, npm install. nodemon (Windows) or sudo nodemon(OSX/Linux) — user2379441
By the way a small tip if you initialize as constructor(public router:Router){} according to es6 syntax it is equivalent to declaring router:Router constructor(router:Router){this.router=router;}. When you declare a variable as public it automatically is assigned in the global scope. — user2379441

user2379441 user2379441 · Accepted Answer · 2015-08-10T13:24:18

The answer to the question is pretty simple. Somehow the new beta typescript compiler while running from cli seems to completely avoid angular's DI. Compiling from the IDE (Sublime 3) plugin seems to have fixed the issue.

I have further improved the code and should be pushing it to GIT with screenshots soon for reference of others and to play with.

Angular 2 Router broken since version alpha 34

1 Answers