I am developing an auth guard in angular 8, but I'm getting the following error:

Property pipe does not exist on type Observable

This is happening when I call the isLoggedIn() function from the "canActivate" function which return Observable of AuthService clas.

Follows the AuthGuard service which implements the CanActivate interface:

import { Injectable } from "@angular/core";
import {
Router,
CanActivate,
ActivatedRouteSnapshot,
RouterStateSnapshot
}  from "@angular/router";

import { AuthService } from "../login/auth.service";
import { map, take } from "rxjs/operators";
import { merge } from "rxjs";
import { Observable } from "rxjs";

@Injectable({ providedIn: "root" })
export class AuthGuard implements CanActivate {
constructor(
private router: Router,
private authenticationService: AuthService
) {}

canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> {
return this.authenticationService.isLoggedIn().pipe(
  take(1),
  map(isLoggedIn => {
    if (isLoggedIn) {
      return true;
    } else {
      return false;
    }
   })
 );
 }
}

Here is my AuthService:

 import { Injectable } from "@angular/core";
 import { HttpClient } from "@angular/mon/http";
 import { Observable, BehaviorSubject } from "rxjs";
 import { map } from "rxjs/operators";

 @Injectable({
 providedIn: "root"
 })
export class AuthService {
url = "http://localhost:8098/login";

isLogged: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

 constructor(private http: HttpClient) {
  this.isLogged = new BehaviorSubject<boolean>(this.tokenAvailable());
 }

 isLoggedIn() {
   return this.isLogged.asObservable;
 }

 public login(credential): Observable<boolean> {
 return this.http.post(this.url, credential).pipe(
  map(data => {
    localStorage.setItem("token", data["token"]);
    this.isLogged.next(true);
    return true;
  })
  );
 }

 public logout() {
   localStorage.removeItem("token");
   this.isLogged.next(false);
 }

  getToken(): string {
    let token = localStorage.getItem("token");
    return token;
  }

 tokenAvailable(): boolean {
   let token = this.getToken();
   return !token ? false : true;
  }
 }

And here is my package.json

            {
          "name": "angular-auth",
          "version": "0.0.0",
          "scripts": {
            "ng": "ng",
            "start": "ng serve",
            "build": "ng build",
            "test": "ng test",
            "lint": "ng lint",
            "e2e": "ng e2e"
          },
          "private": true,
          "dependencies": {
            "@angular/animations": "~8.2.14",
            "@angular/mon": "~8.2.14",
            "@angular/piler": "~8.2.14",
            "@angular/core": "~8.2.14",
            "@angular/forms": "~8.2.14",
            "@angular/platform-browser": "~8.2.14",
            "@angular/platform-browser-dynamic": "~8.2.14",
            "@angular/router": "~8.2.14",
            "jwt-decode": "^2.2.0",
            "rxjs": "^6.4.0",
            "tslib": "^1.10.0",
            "zone.js": "~0.9.1"
          },
          "devDependencies": {
            "@angular-devkit/build-angular": "~0.803.21",
            "@angular/cli": "~8.3.21",
            "@angular/piler-cli": "~8.2.14",
            "@angular/language-service": "~8.2.14",
            "@types/node": "~8.9.4",
            "@types/jasmine": "~3.3.8",
            "@types/jasminewd2": "~2.0.3",
            "codelyzer": "^5.0.0",
            "jasmine-core": "~3.4.0",
            "jasmine-spec-reporter": "~4.2.1",
            "karma": "~4.1.0",
            "karma-chrome-launcher": "~2.2.0",
            "karma-coverage-istanbul-reporter": "~2.0.1",
            "karma-jasmine": "~2.0.1",
            "karma-jasmine-html-reporter": "^1.4.0",
            "protractor": "~5.4.0",
            "ts-node": "~7.0.0",
            "tslint": "~5.15.0",
            "typescript": "~3.5.3"
          }
        }

I am developing an auth guard in angular 8, but I'm getting the following error:

Property pipe does not exist on type Observable

This is happening when I call the isLoggedIn() function from the "canActivate" function which return Observable of AuthService clas.

Follows the AuthGuard service which implements the CanActivate interface:

import { Injectable } from "@angular/core";
import {
Router,
CanActivate,
ActivatedRouteSnapshot,
RouterStateSnapshot
}  from "@angular/router";

import { AuthService } from "../login/auth.service";
import { map, take } from "rxjs/operators";
import { merge } from "rxjs";
import { Observable } from "rxjs";

@Injectable({ providedIn: "root" })
export class AuthGuard implements CanActivate {
constructor(
private router: Router,
private authenticationService: AuthService
) {}

canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> {
return this.authenticationService.isLoggedIn().pipe(
  take(1),
  map(isLoggedIn => {
    if (isLoggedIn) {
      return true;
    } else {
      return false;
    }
   })
 );
 }
}

Here is my AuthService:

 import { Injectable } from "@angular/core";
 import { HttpClient } from "@angular/mon/http";
 import { Observable, BehaviorSubject } from "rxjs";
 import { map } from "rxjs/operators";

 @Injectable({
 providedIn: "root"
 })
export class AuthService {
url = "http://localhost:8098/login";

isLogged: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

 constructor(private http: HttpClient) {
  this.isLogged = new BehaviorSubject<boolean>(this.tokenAvailable());
 }

 isLoggedIn() {
   return this.isLogged.asObservable;
 }

 public login(credential): Observable<boolean> {
 return this.http.post(this.url, credential).pipe(
  map(data => {
    localStorage.setItem("token", data["token"]);
    this.isLogged.next(true);
    return true;
  })
  );
 }

 public logout() {
   localStorage.removeItem("token");
   this.isLogged.next(false);
 }

  getToken(): string {
    let token = localStorage.getItem("token");
    return token;
  }

 tokenAvailable(): boolean {
   let token = this.getToken();
   return !token ? false : true;
  }
 }

And here is my package.json

            {
          "name": "angular-auth",
          "version": "0.0.0",
          "scripts": {
            "ng": "ng",
            "start": "ng serve",
            "build": "ng build",
            "test": "ng test",
            "lint": "ng lint",
            "e2e": "ng e2e"
          },
          "private": true,
          "dependencies": {
            "@angular/animations": "~8.2.14",
            "@angular/mon": "~8.2.14",
            "@angular/piler": "~8.2.14",
            "@angular/core": "~8.2.14",
            "@angular/forms": "~8.2.14",
            "@angular/platform-browser": "~8.2.14",
            "@angular/platform-browser-dynamic": "~8.2.14",
            "@angular/router": "~8.2.14",
            "jwt-decode": "^2.2.0",
            "rxjs": "^6.4.0",
            "tslib": "^1.10.0",
            "zone.js": "~0.9.1"
          },
          "devDependencies": {
            "@angular-devkit/build-angular": "~0.803.21",
            "@angular/cli": "~8.3.21",
            "@angular/piler-cli": "~8.2.14",
            "@angular/language-service": "~8.2.14",
            "@types/node": "~8.9.4",
            "@types/jasmine": "~3.3.8",
            "@types/jasminewd2": "~2.0.3",
            "codelyzer": "^5.0.0",
            "jasmine-core": "~3.4.0",
            "jasmine-spec-reporter": "~4.2.1",
            "karma": "~4.1.0",
            "karma-chrome-launcher": "~2.2.0",
            "karma-coverage-istanbul-reporter": "~2.0.1",
            "karma-jasmine": "~2.0.1",
            "karma-jasmine-html-reporter": "^1.4.0",
            "protractor": "~5.4.0",
            "ts-node": "~7.0.0",
            "tslint": "~5.15.0",
            "typescript": "~3.5.3"
          }
        }

• javascript
• angular

3 Answers 3

The asObserbalbe is a function and not a property, as can be seen in here.

So you need to call it in your AuthService like this:

export class AuthService {

     ......

     isLoggedIn() {
        return this.isLogged.asObservable();
     }

     ......

}

If you want to know more about BehaviorSubject you can check this and more about rxjs pipes in here.

asObservable() is a function, you need to call it with ()

asObservable is a function so your isLoggedIn method shold return this.isLogged.asObservable();