After updating my code from Angular 2 to Angular 5 and also updating the AngularFireAuth package, I encountered a problem that has been puzzling me.
Although there are no compile errors with the .map function below, I am seeing a 'map is not a function' error in the console. I need to understand the changes between Angular 2 and Angular 5, as well as what modifications I should make now.
import { AngularFireAuth } from 'angularfire2/auth';
import { CanActivate, Router } from '@angular/router';
import { Injectable } from '@angular/core';
import { GlobalController } from '../services/globalController.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private authService: AngularFireAuth, private router: Router, private global: GlobalController) { }
canActivate(): Observable<boolean> {
return this.authService.authState.map(user => {
if (user && !user.isAnonymous) {
this.global.setUserEmail(user.email);
this.global.setUserID(user.uid);
this.global.setUserName(user.displayName);
this.global.setUserPhoneNumber(user.phoneNumber);
if (user.photoURL == null) {
console.log('No Photo Found.');
this.global.setUserPhotoLink(this.global.getDefaultPhotoLink());
} else {
this.global.setUserPhotoLink(user.photoURL);
}
console.log('User Photo Url:' + user.photoURL );
return true;
}
this.global.ChangeState(this.global.GlobalStates.preLogin);
return false;
});
}
}
Console Log Error "map is not a function"
ERROR Error: Uncaught (in promise): TypeError:
this.authService.authState.map is not a function
TypeError: this.authService.authState.map is not a function
at AuthGuard.canActivate (auth-guard.service.ts:14)
...