Angular 通用，点击 'refresh' 两次后应用程序才会加载

Question

我正在构建一个 Angular 通用应用程序。我最近添加了一个路由解析器并开始看到这种奇怪的行为，当我运行 npm run dev:ssr 时，页面不会加载，直到我单击重新加载按钮两次。

第 1 次：点击：浏览器旋转并且似乎没有超时...

第二次点击：页面加载

这是我的github repo。我怀疑它与我的路由解析器有关，它只是从 Firestore 获取数据并将其放在 TransferState 中。为方便起见，这里是解析器：

import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
import { Observable, of } from 'rxjs';
import { isPlatformServer } from '@angular/common';
import { makeStateKey, TransferState } from "@angular/platform-browser";
import { Restaurant } from '../restaurants/Interfaces.model';
import { AngularFirestore } from '@angular/fire/firestore';
import { first, tap } from 'rxjs/operators';


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

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

    }

    async resolve(route: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Promise<Restaurant> {

        console.log('platformId', this.platformId)

        const rId = route.url[1].path;

        const restaurantId = makeStateKey<Restaurant>("restaurant-" + rId);

        if (this.transferState.hasKey(restaurantId)) {

            console.log('has key', restaurantId)


            const restaurant = this.transferState.get(restaurantId, null);

            this.transferState.remove(restaurantId);

            return restaurant;
        }
        else {

            let result: Restaurant = (await this.afs.doc('restaurants/' + rId).get().toPromise()).data() as Restaurant
            if (isPlatformServer(this.platformId)) {
                this.transferState.set(restaurantId, result);
            }
            return result;
        }
    }
}

Answer 1

事实证明，AngularFire 库中存在一个 bug，其中 observables 没有完成，这是给定的行为。

Angular 通用，点击 'refresh' 两次后应用程序才会加载

Angular Universal, app will not load until clicking 'refresh' twice

javascript

angularfire2

angular