APP_INITIALIZER 导致 Angular 12 中没有错误的空白页（适用于版本 9 到 11）

Question

我们的应用程序从一开始就需要一些服务。因此我们有一些提供者，在启动时初始化它们。这是来自 app.module.ts 中的 providers 部分：

providers: [
  { provide: MAT_DATE_LOCALE, useValue: 'en-US' },
  {
    provide: APP_INITIALIZER,
    useFactory: (service: MetaService) => () => service,
    deps: [MetaService],
    multi: true
  }
],

这在 Angular 9-11 中运行良好。但是，在升级到 Angular 12 之后甚至在一个空白的 Angular 12 项目中，这似乎会破坏应用程序。

虽然创建了服务。使用此正确记录：

useFactory: (service: MetaService) => () => { console.log(service); return service; },

但是，页面返回为空白页面。没有组件被渲染，没有路由发生。

CLI 上没有错误，浏览器控制台中也没有任何错误，只是一个空白页面。当我删除提供程序时，它似乎工作正常。

他们改变了吗，APP_INITIALIZER 在 Angular 12 中是如何工作的？如何修复或更新代码以使其再次运行？也许有更好的方法在启动时初始化服务？

Answer 1

Angular 更改了它的应用初始化程序功能以允许 Observables 和 Promises。同样发生变化的是注入令牌的特殊性，它需要一个 returns 承诺、可观察或无效的函数。所以到目前为止，您的代码很糟糕，因为您返回的是服务而不是预期类型之一。那仍然不能解释哪里出了问题。

Angular 用于检查每个初始化程序的工厂函数是否返回一个承诺并将其添加到承诺数组中以使用 Promise.all()[=25 执行=].现在，它还检查它是否是可观察的，并通过将订阅调用包装在承诺中并将完整和错误的 Observable 回调绑定到 resolve 和 reject Promise 回调来转换为承诺。

如果您的服务有一个名为订阅的方法，那么这将导致您的服务通过Angular的isSubscribable后卫。然后 Angular 会将您的服务视为 Observable，并尝试以上述方式将其转换为承诺。（如果你有一个 then 方法，那么这也会导致问题，但考虑到你的代码之前工作，这不太可能）。承诺永远不会解决，这将导致您描述的行为。

鉴于您共享的代码，我无法想象会导致此问题的其他原因。至少只需更改工厂定义，使其 returns 无效，你应该是好的。

useFactory: (service: MetaService) => () => { }

APP_INITIALIZER 导致 Angular 12 中没有错误的空白页（适用于版本 9 到 11）

APP_INITIALIZER leads to blank page with no errors in Angular 12 (worked from Version 9 to 11)

angular

typescript

angular12