CODEWITHSUNDEEP
angularngrxngrx-effects
Natalia Cáceres
Natalia Cáceres

Reputation: 468

How to kick off a long running process (API request) on app init without blocking the load of an Angular app?

I've got a large Angular application, and it needs some presets to be loaded from the backend. These presets shouldn't block my Angular app from loading and showing, when they are ready, the changes should be transparent to the user (only some functionality should be blocked until loaded).

We are using NGRX and Facade Pattern. Right now the solution was to dispatch the action that kicks off that API request from an eagerly loaded facade constructor.

I was thinking using the INIT ngrx/store action in a meta reducer would be better, from an organizational point of view, as shown in this example here by tomasTrajan and timDeschryver

But I am looking for the most standard way possible. App Initializer wouldn't do it since it blocks the load until its promises/observables complete.

Upvotes: 0

Views: 319

Answers (1)

Jeroen De Groote
Jeroen De Groote

Reputation: 88

The APP_INITIALIZER will only block the application from loading when returning a promise or an observable that did not yet resolve or complete.

Try this:

the callback function returned will not return a promise or an observable. The callback function will just be executed and the app will start without waiting for a response.

export function init(http: HttpClient): any {
  return () => {
    http.get('https://jsonplaceholder.typicode.com/todos/1').pipe(
      delay(3500)
    ).subscribe(
      res => console.log(res)
    )
  }
}

Notes:

  • The api called is just for quick testing in your app.
  • The 'delay' is just for proving that the app will not wait for the observable to complete.

Upvotes: 1

Related Questions