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

【问题标题】：Angular application showing screen blank before fully loadAngular 应用程序在完全加载之前显示屏幕空白
【发布时间】：2021-05-01 01:23:28
【问题描述】：

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

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

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

isspect 的网址是https://ayushmanbhava.org

另外，看看截图吧。

仅供参考，这是我的代码 sn-p 来挖掘它：

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

【问题讨论】：

你应该延迟加载这些图片，它们会占用你所有的初始时间
我的模块是延迟加载的，也将大模块分成更小的块。
@Indrajeet 你能评论 3000 毫秒到 8000 毫秒空闲时间之间的时间线吗？
是的，我看到了。有点奇怪。实际上分析会帮助你。尝试通过从 chrome 开发者控制台的性能选项卡运行诊断来了解是什么花费了这么多时间
@Indrajeet 我能够摆脱这个。我正在承诺运行 appinit 服务，它的超时时间为 6 秒。我这样做是回来并忘记了。感谢您的帮助。

标签： angular google-chrome-devtools lazy-loading

【解决方案1】：

问题出在这段代码中：

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

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

【讨论】：