I am currently working on the following code:
import {Injectable} from '@angular/core';
import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree} from '@angular/router';
import {Observable} from 'rxjs';
import {AngularFireAuth} from '@angular/fire/auth';
import {map, tap} from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class ChatGuard implements CanActivate {
constructor(private afAuth: AngularFireAuth,
private router: Router) {
}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable <boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
return this.afAuth.authState
.pipe(
map(user => user !== null),
tap(value => {
if (!value) {
this.router.navigateByUrl('/login').then();
return value;
} else {
return value;
}
})
);
}
}
Versions I am using are:
Angular CLI: 13.1.4
Node: 16.14.0
I encountered an error in this section of the code:
return this.afAuth.authState
.pipe(
map(user => user !== null),
tap(value => {
if (!value) {
this.router.navigateByUrl('/login').then();
return value;
} else {
return value;
}
})
The error message says:
Type 'Observable<unknown>' is not assignable to type 'boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree>'.Type 'Observable<unknown>' is not assignable to type 'Observable<boolean | UrlTree>'.Types of property 'source' are incompatible.
Do you have any suggestions on how to fix this issue?