Angular 2 Router broken since alpha 34

I've been playing around with Angular2 for quite some time. All code is short lived and uses the latest TypeScript Nightly 1.6 and Angular alpha 34. I can't call the parent router from one of the components. Please help me if possible. With this, I am adding code and error when trying to navigate.

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');
                }
            });
    }
}

      

Mistake

EXCEPTION: TypeError: Unable to read property 'parent' of undefined angular2.dev.js: 22448 STACKTRACE: angular2.dev.js: 22448 TypeError: Unable to read property 'parent' of undefined by eval (login.js: 34) in Zone. run (angular2.dev.js: 136) in Zone.execute. $ __ 3._createInnerZone.zone.fork.fork. $ run [as run] (angular2.dev.js: 16437) in BoundFn zone (angular2.dev.js: 109) in lib $ es6 $ promise $$ internal $$ tryCatch (angular2.dev.js: 1359) in lib $ es6 $ continue $$ internal $$ invokeCallback (angular2.dev.js: 1371) in lib $ es6 $ sell $$ internal $$ publish (angular2.dev.js: 1342) in angular2.dev.js: 187 in Zone. run (angular2.dev.js: 136) in BoundFn zone (angular2.dev.js: 109)

+3


source to share


1 answer


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



I have improved the code even further and have to push it to GIT with screenshot speeds to reference others and play with.

+3


source







All Articles