How to defer initialization of core components of dependent components so that some promises can be resolved

Question

I am making an angular2 application. My biggest problem is the inability to delay loading a child component that is dependent on the main component until some promises are resolved.

I have app.component.ts, with a class called AppComponent, which I load into boot.ts as follows:

bootstrap(AppComponent, [ROUTER_PROVIDERS, HTTP_PROVIDERS]); 

Now I want to name some very important HTTP services before switching to my default route, that is - '/'. One http service returns the data that will be used for SEO and metadata settings on different routes.

I know that the constructor of any class is created first, but I don't know if the constructor will wait for promises to be resolved.

Answer 1

If you use a Router, you can use CanActivate , otherwise just wrap the template with *ngIf="dataArrived"

See also How to pass parameters passed from backend to angular2 bootstrap method

Answer 2

You can load asynchronously after completing the request (s). Here is an example:

 var app = platform(BROWSER_PROVIDERS) .application([BROWSER_APP_PROVIDERS, appProviders]); var service = app.injector.get(CompaniesService); service.executeSomething().flatMap((data) => { var companiesProvider = new Provider('data', { useValue: data }); return app.bootstrap(appComponentType, [ companiesProvider ]); }).toPromise(); 

See this question for more information:

• angular2 boot file with data from ajax calls

and the corresponding plunkr: https://plnkr.co/edit/ooMNzEw2ptWrumwAX5zP?p=preview .

Answer 3

another solution uses a timer in the constructor:

 setTimeout(() => { call your function here }, 500);