Working with AngularFireObject and switchMap

Question

I really don't know how to fix this. How can I fix this error?

in user.service.ts:
import { Injectable } from '@angular/core';

import { AngularFireDatabase, AngularFireList, AngularFireObject } from 'angularfire2/database';

import {AppUser} from './models/app.user';
import * as firebase from 'firebase';
import { Observable } from 'rxjs';

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


  constructor(private db: AngularFireDatabase) { }

  save(user: firebase.User) {
    this.db.object('/users/' + user.uid).update({
      name: user.displayName,
      email: user.email
    });
  }

  get(uid: string): AngularFireObject<AppUser> {
    return this.db.object('/users/' + uid);
  }



in admin-auth-guard.service:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/observable';
import 'rxjs/add/operator/switchMap';
import 'rxjs/operator/map';
import { UserService } from './user.service';
import { CanActivate } from '@angular/router';
import { AuthService } from './auth.service';



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

  constructor(private auth: AuthService, private userService: UserService) { }

   canActivate (): Observable<boolean> {
     return this.auth.user$
      .switchMap(user => this.userService.get(user.uid))<-- ERROR HERE
      .map (appUser => appUser.isAdmin);
    }
}

Argument of type '(user: User) => AngularFireObject' is not assignable to parameter of type '(value: User, index: number) => ObservableInput<{}>'. Type 'AngularFireObject' is not assignable to type 'ObservableInput<{}>'. Type 'AngularFireObject' is not assignable to type 'Iterable<{}>'. Property '[Symbol.iterator]' is missing in type 'AngularFireObject'.

Thanks.

BLACKRIGAN · Accepted Answer · 2019-05-16 23:56:21Z

17

Do it this way for Angular 6:

user.service.ts:

import { Injectable } from '@angular/core';

import { AngularFireDatabase, AngularFireObject } from 'angularfire2/database';

import {AppUser} from './models/app.user';
import * as firebase from 'firebase';
import { Observable } from 'rxjs';

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


  constructor(private db: AngularFireDatabase) { }

  save(user: firebase.User) {
    this.db.object('/users/' + user.uid).update({
      name: user.displayName,
      email: user.email
    });
  }

  get(uid: string): AngularFireObject<AppUser> {
      return this.db.object('/users/' + uid);
  }

}



In admin-auth-guard.service.ts:


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

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

  constructor(private auth: AuthService, private userService: UserService) { }

  canActivate(): Observable<boolean> {
    return this.auth.user$
    .pipe(switchMap(user => this.userService.get(user.uid).valueChanges()))
    .pipe(map(appUser => appUser.isAdmin));
   }

}

answered May 16, 2019 at 23:56

BLACKRIGAN

4216 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jagdish Chopde Over a year ago

Thanks a lot. This solved my problem. and worked in Angular 7 also.

Rahul Sonwanshi Over a year ago

If you are using pipe you don't need to add pipe again. Just separate the switchMap and map with a comma as pipe runs the composed functions in sequence.

Harmandeep Singh · Accepted Answer · 2020-07-18 03:24:12Z

7

I found the answer:

user.service.ts:

import { Injectable } from '@angular/core';

import { AngularFireDatabase, AngularFireObject } from 'angularfire2/database';

import {AppUser} from './models/app.user';
import * as firebase from 'firebase';
import { Observable } from 'rxjs';

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


  constructor(private db: AngularFireDatabase) { }

  save(user: firebase.User) {
    this.db.object('/users/' + user.uid).update({
      name: user.displayName,
      email: user.email
    });
  }

  get(uid: string): AngularFireObject<AppUser> {
      return this.db.object('/users/' + uid);
  }

}

In admin-auth-guard.service.ts:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/observable';
import 'rxjs/add/operator/switchMap';
import 'rxjs/operator/map';
import { UserService } from './user.service';
import { CanActivate } from '@angular/router';
import { AuthService } from './auth.service';




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

  constructor(private auth: AuthService, private userService: UserService) { }

   canActivate(): Observable<boolean> {
      return this.auth.user$
      .pipe(switchMap(user => this.userService.get(user.uid).valueChanges())))
      .pipe(map (appUser => appUser.isAdmin)));
     }
}

Thanks everybody!

edited Jul 18, 2020 at 3:24

Harmandeep Singh

32 bronze badges

answered Sep 24, 2018 at 16:27

Vini Pineda

1732 silver badges8 bronze badges

3 Comments

khan Farman Over a year ago

thnx bro, ur answer helped me a lot

Saurabh Rana Over a year ago

Thanks Vini, you are a life saver. Can you shed more light as to why valueChanges() did the trick and why do we need it?

Alberto Espinoza Over a year ago

@SaurabhRana you need it because you can't map over an AngularFireObject, instead, you need to map the Observable, that's why the valueChanges is needed here.

origaminh · Accepted Answer · 2019-01-03 16:08:29Z

For RxJS 6 and later, you will need to import and use Observable, map, switchMap differently:

admin-auth-guard.service.ts:
import { Injectable } from '@angular/core';
import { map, switchMap } from 'rxjs/operators'
import { Observable } from 'rxjs';
import { UserService } from './user.service';
import { CanActivate } from '@angular/router';
import { AuthService } from './auth.service';

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

  constructor(private auth: AuthService, private userService: UserService) { }

  canActivate(): Observable<boolean> {
    return this.auth.user$.pipe(
      switchMap(user => this.userService.get(user.uid).valueChanges()),
      map (appUser => appUser.isAdmin)
    )
  }
}

Suraj Rao · Accepted Answer · 2021-11-28 17:22:14Z

After Angular 9 and the typescript version, you need to modify code like this.

    //admin Guard
import { UserService } from './../Services/user.service';
import { AuthService } from './../Services/auth.service';
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { map, switchMap } from "rxjs/operators";

@Injectable({
  providedIn: 'root'
})
export class AdminGuard implements CanActivate {
  constructor(private authService: AuthService, private UserService: UserService) {

  }
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

    return this.authService.userDetails$.pipe(switchMap(user => this.UserService.get(user!.uid).valueChanges()))
      .pipe(map(appUser => appUser!.isAdmin || false));

  }

}

Collectives™ on Stack Overflow

Working with AngularFireObject and switchMap

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related