title: Uncaught (in promise): TypeError: this.auth.user$.map is not a function
body: <p>I'm new to Angular and while doing development the below code works fine (I'm using Visual Studio Code as the code editor) </p>
  
  <p>when i click on the menu links below error occur in the console window </p>
  
  <h2>ng-version="6.0.9"</h2>
  
  <pre><code>npm list --depth=0 
  +-- rxjs@6.2.2
  +-- rxjs-compat@6.2.2
  </code></pre>
  
  <hr>
  
  <pre><code>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)
  </code></pre>
  
  <p><strong>The code occurs error : auth-guard.service.ts</strong> </p>
  
  <pre><code>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 =&gt; {
        if (user) return true; 
  
        this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
        return false;
      });
    }
  
  }
  </code></pre>
  
  <p><strong>auth.service.ts code</strong></p>
  
  <pre><code>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&lt;firebase.User&gt;;
  
    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();
    }
  
  }
  </code></pre>
  
  <p><strong>I expect for a solutions from all experts</strong> </p>