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

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

0 голосов
/ 22 сентября 2018

Я работаю над небольшим веб-приложением на основе универсального углового стартера и 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 .

...