Type 'Observable>' is not assignable to type 'boolean | UrlTree | Observable | Promise'

Question

I have Guard with canActivate method:

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
      return this.fireAuth.authState.pipe(
        take(1),
        map(authState => !!authState),
        map(auth => !auth ? this.router.navigate(['/']) : true)
      )
  }

This is work, but I have typescript error in console:

ERROR in auth.guard.ts(20,7): error TS2322: Type 'Observable>' is not assignable to type 'boolean | UrlTree | Observable | Promise'.

How can I fix this?

https://github.com/angular/angularfire2/blob/master/docs/auth/router-guards.md — Jota.Toledo, Aug 11 '19 at 11:24
@Jota.Toledo wow, never knew about built in guards in fire auth — Volodymyr Humeniuk, Aug 11 '19 at 15:26

JB Nizet · Answer 1 · 2019-08-11T08:58:43.300

1

Don't use map(). You don't want to change the emitted value. You just want to produce a side effect.

take(1),
map(authState => !!authState),
tap(auth => {
  if (!auth) {
    this.router.navigate(['/']);
  }
});

Or, if it makes it simpler to understand to you:

take(1),
map(authState => {
  if (authState) {
    return true;
  } else {
    this.router.navigate(['/']);
    return false;
  }
});

Or better, return a UrlTree instead of navigating yourself when the router must navigate elsewhere:

take(1),
map(authState => !!authState || this.router.parseUrl('/'))

edited Aug 11 '19 at 08:58

answered Aug 11 '19 at 08:42

JB Nizet

678,734
91
1,224
1,255

But I changed it from `tap` to `map` because you told me in this question: `https://stackoverflow.com/questions/57448349/guard-always-return-true` :D – Volodymyr Humeniuk Aug 11 '19 at 08:45
No, I never told you that. Re-read my answer. I explained what map() does and what tap() does. You were expecting tap() to change the emitted value, and I explaiend that it wasn't. And I explained that you were emitting the same value in both cases from map(), whereas one should have emitted the inverse of the other. – JB Nizet Aug 11 '19 at 08:47
Sorry, but I really don't understand, how should I change my code. If I change it to `tap` - then it's just didn't work, but when I left it how it is - it's work, but I have typescript errors. – Volodymyr Humeniuk Aug 11 '19 at 08:53
1

I posted two ways of implementing it. You need to think about two different things. 1. when should the guard authorize the navigation? The returned observable must emit true if it's authorized, and false or a UrlTree otherwise 2. If it doesn't authorise the navigation, should it navigate elsewhere? If it should, then it should navigate and return false, or return a UrlTree to where it should navigate. – JB Nizet Aug 11 '19 at 08:57

Type 'Observable>' is not assignable to type 'boolean | UrlTree | Observable | Promise'

1 Answers1