Универсальная сборка Angular зависает на странице предварительного рендеринга с запросом API

Question

Я работаю над небольшим веб-приложением на основе углового универсального стартера и pokeapi. Поскольку большая часть данных, которые я хочу показать, на самом деле не изменяется, я хочу использовать предварительно обработанные страницы, чтобы уменьшить количество запросов к API и повысить производительность. Для моего примера я разместил список покемонов на главной странице моего приложения, которые я извлекаю из API.

export class HomeComponent implements OnInit {

    pokemon$: ReplaySubject<ResourceList> = new ReplaySubject<ResourceList>();

    constructor(private pokedexService: PokedexService, private state: TransferState) { }

    ngOnInit() {
        if (this.state.hasKey(STATE_KEY_POKEMON)) {
            this.pokemon$.next(this.state.get(STATE_KEY_POKEMON, {} as ResourceList));
        }
        else {
            this.pokedexService.getResourceByCategory(ResourceCategory.POKEMON)
                .subscribe((resourceList: ResourceList) => {
                    this.pokemon$.next(resourceList);
                    this.state.set(STATE_KEY_POKEMON, resourceList.results);
                });
        }
    }
}

Это прекрасно работает, когда у меня есть клиент визуализации страницы. Однако, когда я пытаюсь предварительно отрендерить приложение, процесс сборки зависает. Поскольку я запускаю локальный экземпляр API, я вижу, что был сделан запрос, и он вернулся с состоянием 200. Журнал сборки выглядит так:

npm run build:prerender

> ng-universal-demo@0.0.0 build:prerender C:\Users\thijs\Development\pokedex universal\angular-universal-pokedex
> npm run build:client-and-server-bundles && npm run compile:server && npm run generate:prerender


> ng-universal-demo@0.0.0 build:client-and-server-bundles C:\Users\thijs\Development\pokedex universal\angular-universal-pokedex
> ng build --prod && ng run ng-universal-demo:server:production


Date: 2018-09-22T16:47:41.687Z
Hash: c49708f1ccb7e73e327a
Time: 8181ms
chunk {0} runtime.6afe30102d8fe7337431.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.34c57ab7888ec1573f9c.css (styles) 0 bytes [initial] [rendered]
chunk {2} polyfills.c174e4dc122f769bd68b.js (polyfills) 64.3 kB [initial] [rendered]
chunk {3} main.19481e4ceb7a5808fe78.js (main) 312 kB [initial] [rendered]

Date: 2018-09-22T16:47:50.816Z
Hash: ee7e30e1f9c277bb5cbf
Time: 5739ms
chunk {main} main.js (main) 38.2 kB [entry] [rendered]

> ng-universal-demo@0.0.0 compile:server C:\Users\thijs\Development\pokedex universal\angular-universal-pokedex
> tsc -p server.tsconfig.json


> ng-universal-demo@0.0.0 generate:prerender C:\Users\thijs\Development\pokedex universal\angular-universal-pokedex
> cd dist && node prerender

Единственный способ завершить сборку перед рендерингом - удалить веб-запрос. Я думаю, что на заднем плане должно быть что-то еще. Я попытался переключить Observable на Обещание, но это ничего не изменило. Что мне не хватает?

Вы можете найти мой проект на GitHub.

Answer 1

Немного поздно, но это может помочь, если кто-то борется:

Как и в предыдущем разделе об ожидании завершения макрозадач, обратная сторона медали состоит в том, что платформа не будет ждать завершения микрозадач до завершения рендеринга. В Angular Universal мы исправили HTTP-клиент Angular, чтобы превратить его в макрозадачу, чтобы гарантировать выполнение всех необходимых HTTP-запросов для данного рендеринга. Тем не менее, этот тип исправления может не подходить для всех микрозадач, поэтому рекомендуется действовать по своему усмотрению. Вы можете посмотреть в справочнике по коду, как Universal обертывает задачу, чтобы превратить ее в макрозадачу, или вы можете просто выбрать изменение поведения сервера для данных задач.

Обычно, если ваши HTTP-запросы занимают слишком много времени, предварительная обработка зависает и не завершается. Кроме того, когда у меня возникла эта проблема, в терминале не было вывода ошибок, что сильно усложняло отладку.