I have been working on an Angular project where I am utilizing an AuthGuard class to prevent unauthorized access to protected pages. Despite following an online course, I encountered the following issue:
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { AuthService } from './auth.service';
import 'rxjs/Rx';
import 'rxjs/add/operator/map'
import { Observable } from 'rxjs';
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService,
private router:Router) {}
canActivate(route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> {
return this.authService.authInfo$
.map(authInfo => authInfo.isLoggedIn())
.take(1)
.do(allowed => {
if(!allowed) {
this.router.navigate(['/login']);
}
})
}
}
In my AuthService class, I simply declared the following property:
authInfo$:Observable<boolean>;
The problem arises in my AuthGuard class, where I receive an error message on this particular line:
.map(authInfo => authInfo.isLoggedIn())
The error states:
Property 'map' does not exist on type 'Observable'.ts(2339)
Despite importing the import 'rxjs/add/operator/map' operator, I cannot figure out why this error is occurring. What could be causing this? How can I resolve this issue?