Angular Universal + AngularFire server hangs because of first() pipe

Viewed 263

I am building an angular/firestore application that needs SSR. I added angular universal and everything works well until I use the first() pipe on any of the firestore calls then the server just hangs. I need the first pipe because I depend on it when using a route resolver in 2 of my calls. Here's a sample of my code:

Service:

return this.db
      .collection("posts", (ref) => ref.where("featured", "==", true))
      .snapshotChanges()
      .pipe(
        first(),
        map((snaps) => this.convertSnaps<Post>(snaps)),
        catchError((val) => of(val))
      );

Resolver:

export class FeaturedResolver implements Resolve<Post[]> {
  constructor(private postsService: PostsService) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<Post[]> {
    return this.postsService.featuredPosts();
  }
}

home-routing:

  {
    path: "",
    component: HomeComponent,
    resolve: {
      featuredPosts: FeaturedResolver,
    },
  },

Component:

  ngOnInit(): void {
    this.posts = this.route.snapshot.data["featuredPosts"];
  }

package.json:

    "@angular/fire": "^6.0.0",
    "firebase": "^7.14.2",

Does anyone know what this is happening?

1 Answers

Yeah it's the same issue as here.

It normally happens when you use the .where() query with take(1) or first(). Hopefully a fix is on the way.

Related