Waiting for an HTTP request to complete during server-side rendering with Angular 5 Universal

Question

Waiting for an HTTP request to complete during server-side rendering with Angular 5 Universal

Currently, I am working on an Angular 5 application that is being served using ngExpressEngine (built off the Angular Universal starter project). Within my app, there is a component that makes an HTTP request to fetch some data for display purposes. Everything functions as intended; however, when I use Google's fetch tool as a bot, it returns the rendered page without any of the requested data. Is there a way to configure the ngExpressEngine server to wait for HTTP requests to be fulfilled before rendering the page back to the user?

angular typescript server-side-rendering angular-universal

Answer 1

Answer №1

Although I cannot speak for Angular 5, I can confirm that with the most recent Angular release (7.2 at the time of writing), all data loaded through a Resolve is correctly displayed on the server side. Additionally, data loaded through ngOnInit hooks, even if it is asynchronous, is also properly rendered.

This functionality is made possible by Zone.js which tracks all asynchronous operations and triggers an onMicrotaskEmpty event once the asynchronous task queue is empty. This signals to Angular that the page is ready for rendering. For further information, you can refer to: what is the use of Zone.js in Angular 2

Answer 2

Although I cannot speak for Angular 5, I can confirm that with the most recent Angular release (7.2 at the time of writing), all data loaded through a Resolve is correctly displayed on the server side. Additionally, data loaded through ngOnInit hooks, even if it is asynchronous, is also properly rendered.

This functionality is made possible by Zone.js which tracks all asynchronous operations and triggers an onMicrotaskEmpty event once the asynchronous task queue is empty. This signals to Angular that the page is ready for rendering. For further information, you can refer to: what is the use of Zone.js in Angular 2

Answer 3

Answer №2

If you want to delay the initialization of your app until fetching data from your API, you can utilize APP_INITIALIZER in your provider within the client app module:

//app.module.ts
providers: [{provide: APP_INITIALIZER, deps: [HttpClient], multi: true,
    useFactory: (http: HttpClient: Promise) => new Promise<Your Data Interface>((resolve, reject) => http.get("").pipe(map(data => {
     // Do something with the fetched data
     resolve(data)
    }), catchError(error => of(error).pipe(map(() => // Handle errors here if needed)))))}]

Answer 4

If you want to delay the initialization of your app until fetching data from your API, you can utilize APP_INITIALIZER in your provider within the client app module:

//app.module.ts
providers: [{provide: APP_INITIALIZER, deps: [HttpClient], multi: true,
    useFactory: (http: HttpClient: Promise) => new Promise<Your Data Interface>((resolve, reject) => http.get("").pipe(map(data => {
     // Do something with the fetched data
     resolve(data)
    }), catchError(error => of(error).pipe(map(() => // Handle errors here if needed)))))}]

Waiting for an HTTP request to complete during server-side rendering with Angular 5 Universal

Answer №1

Answer №2

Similar questions

What is the best way to evaluate typing into an input field?

The error message thrown when running `ng test` states that the module '@angular-cli/plugins/karma' cannot be found

Encountering issues with resolving all parameters when attempting to dynamically generate a component in Angular

Refreshing a paginated mat-table in Angular results in missing row data

Guide on deploying an Angular 7 frontend paired with a Spring Boot backend

Leveraging Angular 2 for showcasing PDF files retrieved from a web service API with the help of a PDF Viewer

Points in an array being interpolated

Examining for a TypeError with Typescript and Jasmine

Caught up: TypeScript not catching errors inside Promises

Important notice: It is not possible to assign refs to function components. Any attempt to do so will result in failure. If you intended to assign a ref, consider

Avoid the import of @types definition without exports in TypeScript to prevent the error TS2306 (not a module)

Creating a table and filling it with data from any cell is a simple process

In the context of NextJs, the req.body is treated as an object within the middleware, but transforms

Tips for integrating dynamic external components into Angular applications

Error Encountered in Webpack Development Server: Module 'ipaddr.js' Not Found

Challenges in conducting asynchronous tests for Angular2 due to setTimeout complications

Enhance the appearance of the table footer by implementing pagination with Bootstrap Angular6 Datatable styling

issue encountered while trying to resolve dependency tree during npm installation: ERESOLVE - unable to

Determining the return type of a function by analyzing its argument(s)

Display the concealed mat-option once all other options have been filtered out