Question

我最近从Angular 2升级到Angular 5，并且还更新了AngularFireAuth包。我遇到了一个我无法弄清楚的问题。

虽然使用下面的.map没有编译错误，但我注意到控制台中的“map is a function”错误。试图了解从Angular 2到Angular 5的变化以及我现在需要使用的变化。

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;
    });
}

}

控制台日志错误“地图不是函数”

  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)
at MapSubscriber.__WEBPACK_IMPORTED_MODULE_6_rxjs_operator_map__.a.call [as project] (router.js:3353)
at MapSubscriber._next (map.js:69)
at MapSubscriber.next (Subscriber.js:82)
at ArrayObservable._subscribe (ArrayObservable.js:103)
at ArrayObservable._trySubscribe (Observable.js:171)
at ArrayObservable.subscribe (Observable.js:159)
at MapOperator.call (map.js:49)
at Observable.subscribe (Observable.js:156)
at MergeMapOperator.call (mergeMap.js:78)
at AuthGuard.canActivate (auth-guard.service.ts:14)
at MapSubscriber.__WEBPACK_IMPORTED_MODULE_6_rxjs_operator_map__

Answer 1

问题在于我还将RxJS升级到版本^ 5.5 ，并且由于“RxJS正在转向可让运营商改善树木震动并且更容易创建自定义运营商”这一事实我需要修改我的代码以支持它。

可以找到一个好的资源here。

简而言之，我从

修改了我的import语句

import 'rxjs/add/operator/map';

要：

import { map } from 'rxjs/operators';

我还在该部分添加了一个.pipe包装器。

@Injectable()
export class AuthGuard implements CanActivate {
constructor(private authService: AngularFireAuth,  private router: Router, private global: GlobalController) { }
canActivate(): Observable<boolean> {
    return this.authService.authState.pipe(
         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;
    }));
}

升级Angular和AngularFireAuth后收到“Map is not Function”错误

1 个答案: