Angular 및 AngularFireAuth를 업그레이드 한 후 '지도가 함수가 아닙니다'오류가 발생했습니다.

Question

최근 Angular 2에서 Angular 5로 업그레이드했으며 AngularFireAuth 패키지도 업데이트했습니다. 알아낼 수있다.

아래의 .map을 사용하여 컴파일 오류가 발생하지 않지만 콘솔에서 '맵은 기능이 아닙니다'오류가 발생했습니다. 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는 lettable 운영자가 나무 떨림을 개선하고 사용자 정의 오페라를보다 쉽게 ​​만들 수있게되었습니다. tors "나는 그것을 지원하기 위해 코드를 수정해야합니다.

좋은 리소스는 here입니다.

import { map } from 'rxjs/operators'; 

가 나는 또한 섹션에 .pipe 래퍼를 추가 :

은 한마디로 나는에

import 'rxjs/add/operator/map'; 

에서 내 import 문을 수정했습니다.

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