Uncaught (in promise): TypeError: this.auth.user$.map is not a function

Question

我是 Angular 的新手，在进行开发时，以下代码工作正常（我使用 Visual Studio Code 作为代码编辑器）

当我点击下面的菜单链接时，控制台窗口中发生错误

ng-version="6.0.9"

npm list --depth=0 
+-- rxjs@6.2.2
+-- rxjs-compat@6.2.2

---

ERROR Error: Uncaught (in promise): TypeError: this.auth.user$.map is not a function
TypeError: this.auth.user$.map is not a function
    at AuthGuard.push../src/app/auth-guard.service.ts.AuthGuard.canActivate (auth-guard.service.ts:22)
    at MapSubscriber.project (router.js:2768)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:35)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at Observable._subscribe (subscribeToArray.js:5)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:42)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:28)
    at MapOperator.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call (map.js:18)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:23)
    at MergeMapOperator.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call (mergeMap.js:28)
    at AuthGuard.push../src/app/auth-guard.service.ts.AuthGuard.canActivate (auth-guard.service.ts:22)
    at MapSubscriber.project (router.js:2768)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:35)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
    at Observable._subscribe (subscribeToArray.js:5)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe (Observable.js:42)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:28)
    at MapOperator.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call (map.js:18)
    at Observable.push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe (Observable.js:23)
    at MergeMapOperator.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call (mergeMap.js:28)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3751)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1540)

代码出现错误：auth-guard.service.ts

import { Injectable } from '@angular/core';
import { CanActivate, Router, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';
import { Observable } from "rxjs/Rx";
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private auth: AuthService, private router: Router) { }

  canActivate(route, state: RouterStateSnapshot) {
    return this.auth.user$.map(user => {
      if (user) return true; 

      this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
      return false;
    });
  }

}

auth.service.ts 代码

import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase';
import { Observable } from 'rxjs';
import { ActivatedRoute } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  user$: Observable<firebase.User>;

  constructor(private afFireAuth: AngularFireAuth,private route: ActivatedRoute) {
    this.user$ = afFireAuth.authState;
  }

  login(){
    let returnUrl = this.route.snapshot.queryParamMap.get('returnUrl') || '/';
    localStorage.setItem('returnUrl', returnUrl);


    this.afFireAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider);
  }

  logout() {

    this.afFireAuth.auth.signOut();
  }

}

我期待所有专家的解决方案

Answer 1

问题是由于 Angular 6 上的 ma​​p 语法的较新版本。您需要更改 import 语句并将 .pipe 与 Angular 6 版本中的地图一起使用。

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';
import { map } from 'rxjs/operators';

@Injectable()
export class AuthGuard implements CanActivate{

  constructor(private auth: AuthService, private router: Router) { }
  canActivate() {
     return this.auth.user$.pipe(map (
       user => {
      if ( user ) return true;

      this.router.navigate(['/login']);
      return false;
    }
    ));
  }
}

Answer 2

auth-guard.service.ts 需要改为

import { Injectable } from '@angular/core';
import { CanActivate, Router, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';

//import { Observable } from "rxjs/Rx";
//import { map } from 'rxjs/operators';

import 'rxjs/add/operator/map'; 

....
export class AuthService {
 ....
}

Answer 3

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { AuthService } from './auth.service';
import { Router } from '@angular/router';
import { map } from 'rxjs/operators';
@Injectable({
  providedIn: 'root'
})
export class AuthGuardService implements CanActivate{

  constructor(private auth : AuthService,private router : Router) { }

  canActivate(){
    return this.auth.user$.pipe(map(user=>{
      if(user){
        return true;
      }
      else {
        this.router.navigate(['/login']);
        return false;
      }
    }));
  }

}