Angularfire: Property 'map' does not exist on type 'AngularFireAuth'

[cerealexx]

Hi,

I've upgraded to latest Angular 2.0.0 and Angular-cli webpack. But when trying to .map an Observable, TS returns this error Property 'map' does not exist on type 'AngularFireAuth'

Here is the AuthGuard service where I'm trying to return an Observable:

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

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(
    private af: AngularFire,
    private router: Router,
    public AuthService: AuthService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.af.auth.map((auth) => {
        if (!auth) {
          this.AuthService.loggedIn = false;
          this.router.navigateByUrl('');
          return false;
        }
        this.AuthService.loggedIn = true;
        return true;
    });
  }
}

Any ideas? Thanks!

[mukesh51]

Try adding at the top

import 'rxjs/add/operator/map'

[cerealexx]

I also had to add the same line for .take(1) but it worked. Thanks!

Seems like a workaround to me though. Is it a problem with Angular or AngularFire? And if so, is it going to be fixed in the future?

[mukesh51]

It's not a work-around. I am sure you can find a lot of info on internet, but let me give you my simple theory.
ReactiveX library has lot of functions, which does a variety of magic for you. If you don't want to import specific functions in your app, then you can download this entire library with one single import
"import 'rxjs/Rx'"
The down-side of using this import is, for example: when a user is accessing your app using mobile phone, the entire library will be downloaded on his phone and you may not be even using all of the functions of the library. so Seems like Google guys have come up with a strip-down version of ReactiveX library, which contains standard functions and any other functions like .map, .flatMap etc can be imported on need basis.

Hope this helps.

@katowulf any thoughts ??

[cerealexx]

I see, great explanation. Thanks!