navigation - example - router events angular 4

Angular 2 Router roto desde la versión alpha 34

Question

He estado jugando con Angular2 por bastante tiempo. Todo el código está desangrado y usa el último TypeScript Nightly 1.6 y Angular alpha 34. No puedo llamar al enrutador principal desde uno de los componentes. Por favor, ayúdame si es posible. Adjunto adjunto el código y el error en el intento de navegación.

aplicaciones

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

EXCEPCIÓN: TypeError: No se puede leer la propiedad ''parent'' de undefined angular2.dev.js: 22448 STACKTRACE: angular2.dev.js: 22448 TypeError: No se puede leer la propiedad ''parent'' de undefined en eval (login.js: 34) en Zone. run (angular2.dev.js: 136) en Zone.execute. $ __ 3._createInnerZone.zone.fork.fork. $ run [as run] (angular2.dev.js: 16437) en zoneBoundFn (angular2.dev.js: 109) en lib $ es6 $ promise $$ internal $$ tryCatch (angular2.dev.js: 1359) en lib $ es6 $ promise $$ interna $$ invokeCallback (angular2.dev.js: 1371) en lib $ es6 $ promise $$ interno $$ publish (angular2.dev.js: 1342) en angular2.dev.js: 187 en Zone.run (angular2.dev.js: 136) en zoneBoundFn (angular2.dev.js: 109)

Answer 1

La respuesta a la pregunta es bastante simple. De alguna manera, el nuevo compilador de tipografía beta mientras se ejecuta desde cli parece evitar por completo la DI de angular. La compilación del complemento IDE (Sublime 3) parece haber solucionado el problema.

He mejorado aún más el código y debería llevarlo a GIT con capturas de pantalla pronto para referencia de otros y para jugar.