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

Question

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

我的主要*.js 文件在 gzip 实施后小于 400kb。

检查时，网络空闲的时间间隔约为 4000 毫秒。我真的不知道该怎么办。

另外，请看截图。

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

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 { }

Answer 1

问题出在这段代码中：

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

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

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

Angular application showing screen blank before fully load

lazy-loading

google-chrome-devtools

angular