Why AngularFire observable does not complete in route resolver? - even after .pipe(take(1))

Question

In my Angular app, I'm using a route resolver to return a 'restaurant' object. However, when I load the route, it seems like the observable does not complete. I added .pipe(take(1)) to make sure it completes but that is not working.

Can someone help me spot what I'm doing wrong?

restaurant.resolver.ts

import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
import {  Observable } from 'rxjs';
import {  TransferState } from "@angular/platform-browser";
import { Restaurant } from '../restaurants/Interfaces.model';
import { AngularFirestore } from '@angular/fire/firestore';
import { first, take } from 'rxjs/operators';
import { OrderFormService } from '../restaurants/order-form.service';

@Injectable()
export class RestaurantResolver implements Resolve<Restaurant> {

    constructor(
        public afs: AngularFirestore,
        private transferState: TransferState,
        public orderForm: OrderFormService,
        @Inject(PLATFORM_ID) private platformId) {

    }

    resolve(route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Observable<any> {

            let restaurant = this.afs.doc('restaurants/thaiHouse').valueChanges().pipe(take(1)) 
            console.log('e', restaurant)
            return restaurant

    }
}

Answer 1

This is a known issue with the Angularfire library. Hopefully it is fixed soon. See issue documented here: https://github.com/angular/angularfire/issues/2695