ReplaySubject take is not a function

Question

I am trying to replicate angular-realworld-example-app, but I am caught with an error I do not understand. (I am using RxJS 5.4.0 and Angular 4.2.5).

My route "login" has a guard "No Auth Guard" to check if the user is already logged in. Only "non-logged-in" users can "login." The guard checks if the user is logged in, and negates the answer (bool => !bool) to determine whether the user can pass.

User.service.ts:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { ReplaySubject } from 'rxjs/ReplaySubject';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';


import { ApiService } from './api.service';
import { JwtService } from './jwt.service';
import { User } from '../models/user.model';


@Injectable()
export class UserService {
    private currentUserSubject = new BehaviorSubject<User>(new User());
    public currentUser = this.currentUserSubject.asObservable().distinctUntilChanged();

    private isAuthenticatedSubject = new ReplaySubject<boolean>(1);
    public isAuthenticated = this.isAuthenticatedSubject.asObservable();

    constructor (
        private apiService: ApiService,
        private http: Http,
        private jwtService: JwtService
    ) {}

    // Verify JWT in localstorage with server & load user's info.
    // This runs once on application startup.
    populate() { // THIS IS CALLED IN APP.COMPONENT
        // If JWT detected, attempt to get & store user's info
        if (this.jwtService.getToken()) {
            this.apiService.get('/user')
                .subscribe(
                    data => this.setAuth(data.user),
                    err => this.purgeAuth()
                );
        } else {
            // Remove any potential remnants of previous auth states
            this.purgeAuth();
        }
    }

    setAuth(user: User) {
        // Save JWT sent from server in localstorage
        this.jwtService.saveToken(user.token);
        // Set current user data into observable
        this.currentUserSubject.next(user);
        // Set isAuthenticated to true
        this.isAuthenticatedSubject.next(true);
    }

    purgeAuth() {
        // Remove JWT from localstorage
        this.jwtService.destroyToken();
        // Set current user to an empty object
        this.currentUserSubject.next(new User());
        // Set auth status to false
        this.isAuthenticatedSubject.next(false);
    }

    attemptAuth(type, credentials): Observable<User> {
        const route = (type === 'login') ? '/login' : '';
        return this.apiService.post('/user' + route, {user: credentials})
            .map(
                data => {
                    this.setAuth(data.user);
                    return data;
                }
            );
    }

    getCurrentUser(): User {
        return this.currentUserSubject.value;
    }
}

No-auth-guard.service.ts:

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';

import { UserService } from '../services/user.service';

@Injectable()
export class NoAuthGuard implements CanActivate {
    constructor(
        private router: Router,
        private userService: UserService
    ) {}

    canActivate(
        route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot
    ): Observable<boolean> {

        return this.userService.isAuthenticated.take(1).map(bool => !bool);
    }
}

Despite updating my imports, I still receive an error that take is not a function

Error: Uncaught (in promise): TypeError: this.userService.isAuthenticated.take is not a function
TypeError: this.userService.isAuthenticated.take is not a function

Similar, but not a duplicate of: Getting boolean value from ReplaySubject<boolean> asObservable

Answer 1

We can resolve it in two ways.

import 'rxjs/add/operator/take';

this is more likely importing a specific operator to your service.

import { Observable } from 'rxjs';

i prefer the above statement because it provides all the operators that you need over an Observable rather than a separate import statement for the operator.