Run http request before the DOM is ready in Angular 5

Question

Run http request before the DOM is ready in Angular 5

Navigation

#1 by (0 votes)
#2 by (-1 votes)

0

I'm using Angular 5 with angular-cli.

I would like to know how I can execute several http calls before the DOM is 'ready' and the application initialized. I want to know why the application is very big (I am doing lazy loading) and in the network connections I see that I lose time that I can use to make http calls while the DOM is doing its work.

Here we can see it in the chrome developer tools, in the network tab.

I tried to add a provider in the AppComonent like this:

{
  provide: APP_INITIALIZER,
  useFactory: (setup: SetupService) => () => setup.execute(),
  deps: [SetupService],
  multi: true
}

And also doing it in the main.ts in this way:

setupSerice.setup().then(() => {
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.log(err));
});

The setupService is the one that makes the calls http

What else could I try or do?

Thank you very much in advance.

angular-cli angular4

asked by Arturo 14.12.2017 в 21:10

source

2 answers

Get a default value in a select mvc 5 Detect if I change the value of a key in the next round of the foreach?

score 0 · Answer 1

Depending on the type of calls you need to make (surely, some header with a JWT token, etc), what you could do is implement WebWorkers , which is the way to create a thread to try to parallelize heavy operations. But be careful, because a WebWorker can not access the DOM, and you need to coordinate that "thread" with the "main thread".

On the other hand, it is possible that a ServiceWorker may also be of utility.

If you have questions, leave your question in the comments.

score -1 · Answer 2

To execute a service before and during the initialization of the application, we must use APP_INITIALIZER .

The frame gives you access to the APP_INITIALIZER token. This token is defined in the application_init.ts file

export const APP_INITIALIZER: any = new OpaqueToken('Application Initializer');

To know how to use this token, you can take a look at the ApplicationInitStatus service defined in the same file.

constructor(@Inject(APP_INITIALIZER) @Optional() appInits: (() => any)[]) {
}

The constructor of this service will inject the token APP_INITIALIZER and its value is a matrix of functions. These functions can execute synchronous or asynchronous code. For asynchronous tasks, these functions must return the Promise object, so that the frame knows when resolve all the promises.

Next I leave you a small example, which simulates the loading of a configuration for the page from a server, so that it is better understood.

First the configuration of the HTTP request in ConfigService:

@Injectable()
export class ConfigService {

    private _config: any;

    constructor(private http: Http){}

    load(): Promise<any>{
        return this.http.get('/api/config')
              .map( (response: Response) => response.json())
              .toPromise()
              .then(data => {
                  this._config = data;
                  return data;
               })
    }

    get config(): any {
        return this._config;
    }
}

Next, you must define a provider for this service and add the call to the upload method to the APP_INITIALIZER token. Do not forget the multi parameter . Since this token is an array of functions, this parameter is mandatory to add a new value to this matrix.

@NgModule({
  providers: [
    ConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: (configService: ConfigService) => function() {return configService.load()},
      deps: [ConfigService],
      multi: true
    }]
})
export class ApplicationModule { }