5

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?

Thierry Templier
  • 198,364
  • 44
  • 396
  • 360
hY8vVpf3tyR57Xib
  • 3,574
  • 8
  • 41
  • 86

1 Answers1

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())

Ahmet Can Güven
  • 5,392
  • 4
  • 38
  • 59
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 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" – Benjamin McFerren May 22 '16 at 20:27
  • What Angular2 version are you using? Above code works with RC.1 `@angular/router` but not with `@angular/router-deprecated` – Günter Zöchbauer May 23 '16 at 02:54
  • 1
    nice work but how to detect the previous route, from where the app is coming to which route ? – Pardeep Jain Oct 20 '16 at 13:45
  • The `pairwise()` operator should help here http://stackoverflow.com/questions/33520043/how-to-detect-route-change-in-angular-2/38080657#38080657 – Günter Zöchbauer Oct 20 '16 at 13:47