I'm currently developing a compact web application using the angular universal starter in combination with pokeapi. To enhance performance and reduce API requests, I intend to implement pre-rendered pages since the data displayed remains mostly static. For instance, I have integrated a list of Pokémon on my app's homepage by fetching it from the 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);
});
}
}
}
This functionality works smoothly when rendering pages via the client. However, issues arise when attempting to pre-render the application, causing build processes to hang. Despite confirming that the API call returns a 200 status, the log displays a similar output:
npm run build:prerender
> Initiating build process C:\Users\thijs\Development\pokedex universal\angular-universal-pokedex
> npm run build:client-and-server-bundles && npm run compile:server && npm run generate:prerender
> Initiate build for 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]
> Compiling server code C:\Users\thijs\Development\pokedex universal\angular-universal-pokedex
> tsc -p server.tsconfig.json
> Generating pre-render content C:\Users\thijs\Development\pokedex universal\angular-universal-pokedex
> cd dist && node prerender
To successfully complete the pre-rendering build process, I had to eliminate the web request altogether. There seems to be some background process hindering progress even after switching to an Observable Promise. What critical aspect am I overlooking?