How to resolve angularfire2 data in route?

Question

Trying to resolve some data from angularfire2 in my router. When I pass it return of('Hello Alligator!') my component logs Hello Alligator but when I try and resolve the data from the angularfire service it just hangs and never resolves. I'd also like to set it up where I can still add to the collection. What am I doing wrong?

//SmsListResolverService    

import {Resolve, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router'
import {Observable, of} from 'rxjs'
import { SMS } from './SMS.interface';
import {FirebaseService} from '../_shared/firebase.service'
import { Injectable } from '@angular/core';

import { AngularFirestore } from '@angular/fire/firestore';

@Injectable()
export class SmsListResolverService implements Resolve<Observable<any>>{
    constructor(private db:AngularFirestore){

    }
    resolve(){
        // this_works-----> return of('Hello Alligator!') 
        return this.db.collection('messages').valueChanges() //not this

    }
}


//Route module 
export const routes: Routes = [
  {
    path: 'chat',
    component: SmsComponent,
    resolve: { messages: SmsListResolverService }
 }
];

//component

export class SmsComponent{ 
  constructor(public sms: SmsService, private route:ActivatedRoute) {

    console.log(this.route.snapshot.data)
  }

this thread may help you https://stackoverflow.com/questions/39066604/angular-2-router-resolve-with-observable — Javier Aviles, Dec 12 '18 at 14:12
In the [documentation](https://angular.io/guide/router#resolve-pre-fetching-component-data) they suggest adding `take(1)`: "The Router guards require an observable to complete, meaning it has emitted all of its values. You use the take operator with an argument of 1 to ensure that the Observable completes after retrieving the first value from the Observable ...". In your case that would be added after valueChanges, `.valueChanges().pipe(take(1))` — dmcgrandle, Dec 12 '18 at 16:13

score 0 · Answer 1 · answered Dec 12 '18 at 14:55

0

Like Javier said you need to subscribe your valueChanges:

resolve(){
  // this_works-----> return of('Hello Alligator!') 
 this.db.collection('messages').valueChanges().subscribe((value: any) => {
   return value;
 });
}

answered Dec 12 '18 at 14:55

Swoox

3,707
2
21
32

all I get back is a subscriber object in my controller when I do that. – Justin Young Dec 12 '18 at 15:11

How to resolve angularfire2 data in route?

1 Answers1