Angular 应用程序在完全加载之前显示屏幕空白

如何解决Angular 应用程序在完全加载之前显示屏幕空白

使用 aot 的生产模式下的 Angular 应用程序需要 7-8 秒才能完全打开，这可能是正常的，但在此期间整个屏幕显示为空白。我添加了应用加载器以在加载之前显示，但屏幕上没有显示相同的内容，这给人一种可怕的体验。

我的 main*.js 文件在 gzip 实现后低于 400kb。

检查时，网络空闲的时间间隔约为 4000 毫秒。我真的不知道要做什么。

要检查的网址是 https://ayushmanbhava.org

另外，看看屏幕截图。

仅供参考，这是我要深入研究的代码片段：

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 },useClass: ErrorInterceptor,{ 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 { }

解决方法

问题出在这段代码中：

* call read('test2.feature') withAfterHook

函数 appInitService.Init() 的超时时间为 6 秒，因此它正在等待这段时间加载。