Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2 Router broken since version alpha 34

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)

like image 546
user2379441 Avatar asked Aug 04 '26 00:08

user2379441


1 Answers

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.

like image 92
user2379441 Avatar answered Aug 05 '26 16:08

user2379441



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!