In my project, I want to make an http request then load the angular app. After doing some research I found that using APP_INITIALIZER do this. After looking at some tutorials, my code is still not working. When I print the data that is fetched from the API, I see in the console window ZoneAwarePromise. I don't know why I can't see the data in the console window. Btw, is APP_INITIALIZER the good way to do this?
The files are the following (Please let me know if something is not clear):
app.module.ts
export function basicLoader(provider: ElevationService){
return()=>{
console.log('Basic Loader');
return provider.getInfo();
};
}
@NgModule({ declarations: [AppComponent,RackbaseComponent,OoComponent,ItemComponent, SlotsComponent],
imports: [
BrowserModule,
AppRoutingModule,
// MatNativeDateModule,
MatGridListModule,
HttpClientModule,
],
providers: [ElevationService,
{
provide: APP_INITIALIZER, useFactory: basicLoader, deps:[ElevationService], multi: true,
}
],
bootstrap: [AppComponent]
})
export class AppModule {}
elevation.service.ts
public getInfo(){
return new Promise((resolve, reject) => {
this.http.get(this.j1Elevation).subscribe(res => {
resolve(true);
})})
}
app.component.ts
export class AppComponent implements OnInit {
allData: any = [];
constructor(private elevation: ElevationService){
console.log("inside app component");
}
ngOnInit(): void {
this.allData = this.elevation.getInfo();
// printing the data here shows 'ZonAwarePromise'
console.log(this.allData);
}
dontShow(){
this.isShown = false;
}
}