google chrome devtools - Angular application showing screen blank before fully load

Question

Angular application on production mode with aot is taking 7-8 seconds to completely open which could be normal but during this period the entire screen is showing blank. I have added app loader to show before it gets loaded but the same is not showing on screen which gives a horrible experience.

My main*.js file is below 400kb after gzip implemetation.

On inspecting, there is a gap of around 4000ms where network is idle. I am really clueless on what is to be done.

the url to ispect is https://ayushmanbhava.org

Also, have a look at the screenshot.

FYI, here is my code snippet to dig into it:

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient);
}

export function initializeApp(appInitService: AppInitService) {
  return (): Promise<any> => { 
    return appInitService.Init();
  }
}

const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
  suppressScrollX: true
};

@NgModule({
  imports: [
    HttpModule,
    BrowserModule,
    BrowserAnimationsModule,
    SharedModule,
    HttpClientModule,
    PerfectScrollbarModule,
    NgxPermissionsModule.forRoot(),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    InMemoryWebApiModule.forRoot(InMemoryDataService, { passThruUnknownUrl: true }),
    RouterModule.forRoot(rootRouterConfig, { useHash: false })
  ],
  declarations: [AppComponent],
  providers: [
    { provide: PERFECT_SCROLLBAR_CONFIG, useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG },
    { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
    { provide: APP_INITIALIZER, useFactory: initializeApp, deps: [AppInitService], multi: true},
    fakeBackendProvider,
    AuthenticationService, CommonService, AuthGuard, AdminGuard, CookieService,
    Globals, UserService, PubService, CartService, AppInitService,
    {provide: LocationStrategy, useClass: PathLocationStrategy}
  ],
  bootstrap: [AppComponent],
  entryComponents: []
})
export class AppModule { }

question from:https://stackoverflow.com/questions/65915255/angular-application-showing-screen-blank-before-fully-load

Answer 1

The problem was inside this code:

export function initializeApp(appInitService: AppInitService) {
  return (): Promise<any> => { 
    return appInitService.Init();
  }
}

function appInitService.Init() was having timeout of 6 seconds and hence it was waiting for this time to load.