Angular 2 typescript error when using subscribe function on new router (rc 1)

Question

I am trying to set up authentication for my Angular 2 app with the new router. Someone suggested to try the following:

constructor (private _router: Router) {} ngOnInit(){ this._router.subscribe( next => { if (!userIsLoggedInOrWhatever) { this._router.navigate(['Login']); } } ) }

This problem however is that this results in the typescript error

(app.component.ts(47,22): error TS2339: Property 'subscribe' does not exist on type 'Router'.

This is strange because the documentation clearly shows that a Router object does have this function. I am able to call other functions like router.navigate(['/url']). Do you guys have an idea what could be the problem?

Ahmet Can Güven · Accepted Answer · 2017-10-01 08:33:21Z

7

new router

constructor(router:Router) { router.events.subscribe(event:Event => { if(event instanceof NavigationStart) { } // NavigationEnd // NavigationCancel // NavigationError // RoutesRecognized }) }

original

The Router class has an EventEmitter changes you can subscribe to:

ngOnInit(){ this._router.changes.subscribe( next => { if (!userIsLoggedInOrWhatever) { this._router.navigate(['Login']); } } ) }

For how to get the previous route see How to detect a route change in Angular 2? (pairwise())

edited Oct 1, 2017 at 8:33

Ahmet Can Güven

5,4524 gold badges43 silver badges61 bronze badges

answered May 10, 2016 at 11:41

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Benjamin McFerren Over a year ago

could you please offer an example on how to accomplish this in the app.ts where the bootstrap(AppComponent, [ ... ] is also found? I am running into a number of different errors in my various attempts to get this working in my app.ts: "EXCEPTION: TypeError: Cannot read property 'changes' of undefined", "EXCEPTION: No provider for Router!", "angular2-polyfills.min.js:1 Unhandled Promise rejection: ReferenceError: router is not defined", "angular2-polyfills.min.js:1 Unhandled Promise rejection: TypeError: Cannot read property 'changes' of undefined"

Günter Zöchbauer Over a year ago

What Angular2 version are you using? Above code works with RC.1 @angular/router but not with @angular/router-deprecated

Pardeep Jain Over a year ago

nice work but how to detect the previous route, from where the app is coming to which route ?

Günter Zöchbauer Over a year ago

The pairwise() operator should help here stackoverflow.com/questions/33520043/…

Collectives™ on Stack Overflow

Angular 2 typescript error when using subscribe function on new router (rc 1)

1 Answer 1

4 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Linked

Related