Как проверить, вошел ли пользователь в систему Angular 8

Question

В качестве практики (после видеоуроков от udemy) я пытаюсь защитить свою ссылку, но это дает мне ошибку при компиляции. Вот мой auth-guard.service.ts:

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

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

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

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

Вот мой auth.service.ts

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

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

  user$: Observable<firebase.User>;

  constructor(private afAuth: AngularFireAuth) { 
    this.user$ = afAuth.authState;
   }

  login() {
    this.afAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider());
  }

  logout() {
    this.afAuth.auth.signOut();
  }
}

Ошибка компиляции, которую я получаю из auth-guard.service.ts is " Свойство 'map' не существует для типа 'Observable'. " Я что-то не так делаю?

Answer 1

RxJS v5.5.2+ перемещено в Pipeable операторов, чтобы улучшить встряхивание дерева и упростить создание пользовательских операторов. теперь operators необходимо объединить, используя метод pipe
. См.
Новый импорт

import { map} from 'rxjs/operators';

Пример

myObservable
  .pipe(filter(data => data > 8),map(data => data * 2),)
  .subscribe(...);

Модифицированный код

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

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

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

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