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)
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With