`APP_INITIALIZER` 与（`platformBrowserDynamic` 与 `provide`）

Question

我已经知道我可以推迟 Angular 引导，直到 Promise 或 Obseravable 得到解决。

例子：

应用程序模块.ts

{
  provide: APP_INITIALIZER,
  useFactory: (configService: ConfigurationService) => ()=> configService.load(),
  deps: [ConfigurationService],
  multi: true
}

但是我已经看到了使用platformBrowserDynamic的提供者的另一种方法：

例子：

main.ts ：

  (function () {
  return new Promise((resolver) => {
    const someData = {...}

    window.setTimeout(() => //simulate ajax data fetch
    {
      resolver(someData );
    }, 1000);
  });
})()
  .then((myData:any) => platformBrowserDynamic([ {provide: 'pbdProvider', useValue: myData  }]).bootstrapModule(...)

题：

我什么时候应该使用APP_INITIALIZER与（ platformBrowserDynamic with provide ）？

Answer 1

使用APP_INITIALIZER

来自APP_INITIALIZER的 APP_INITIALIZER 允许您在应用程序启动之前加载内容。 这可能会满足您的需求，因为APP_INITIALIZER也支持 Observables，它变得更加方便和易于使用。

这种方法的问题是，当你在 imports 数组中有一个模块时，它有一个forRoot(...)方法，你想将一些数据传递给它，这些数据被加载到APP_INITIALIZER中，你就有了先有chicken-egg-problem . AppModule 需要收集 imports 数组中的所有模块，因此，还运行forRoot(...) s（如果有的话），但是传递给forRoot(...) s 的信息只能在APP_INITIALIZER具有被称为。 但是要调用它， forRoot(...)必须首先获得信息，等等。

使用platformBrowserDynamic()

Angulars platformBrowserDynamic()采用一个名为extraProviders?: StaticProvider[]的可选参数，我们可以使用它来传递额外的提供程序。 我们可以使用 Fetch API 来加载我们的数据，加载后，引导我们的应用程序并提供配置。 然后将准备好的数据加载到APP_INITIALIZER中，您以后可以将这些数据用于任何提供程序。

Answer 2

APP_INITIALIZER不能保证延迟加载模块的引导。 例如，如果用户加载一个惰性加载路径，这个模块将被加载，而不用等待APP_INITIALIZER已经启动的请求。

这就是为什么当您想确保获取所有数据时首选platformBrowserDynamic的原因。 这种方法的唯一缺点是如果请求花费的时间太长或无法访问 angular 注入功能，则会出现空白屏幕。

Angular 导入模块不等待APP_INITIALIZER