APP_INITIALIZER 导致空白页面在 Angular 12 中没有错误（从版本 9 到 11）答案

【问题标题】：APP_INITIALIZER leads to blank page with no errors in Angular 12 (worked from Version 9 to 11)APP_INITIALIZER 导致空白页面在 Angular 12 中没有错误（从版本 9 到 11）
【发布时间】：2021-08-20 17:36:15
【问题描述】：

我们的应用程序从一开始就需要一些服务。因此我们有一些提供程序，在启动时初始化它们。这是来自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 中是如何工作的？如何修复或更新代码以使其再次工作？也许有更好的方法在启动时初始化服务？

【问题讨论】：

是的。使用 Angular 12，我们也可以将 APP_INITIALIZER 与 observable 一起使用。但回报的承诺仍然有效。唯一的问题是，如果工厂返回 observable，它必须完成。另一方面，如果工厂返回一个承诺，它必须解决。如果你不能用这些知识解决问题，请与我们分享MetaService。
我再次阅读了您的问题。如果我错了，请纠正我。您是否尝试在启动时初始化您的服务？我不知道MetaService 的内容，所以无法评论APP_INITIALIZER 是不是最好的方法。要修复此问题，您只需返回 Promise.resolve() 而不是 service。
@nevzatopcu 感谢您的反馈。确切地说，我只想在启动时构建服务。服务本身并没有异步执行任何操作，它只是从构造函数中运行一个同步的init 方法。
@lampshade，MetaService 中有subscribe 方法吗？
@DanielGimenez 刚刚看了看。它正在订阅 Angular 路由器。所以，是的，它是。但服务的构建无需等待完成。

标签： angular typescript angular12

【解决方案1】：

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

Angular 过去只检查每个初始化程序的工厂函数是否返回了一个 Promise，并将其添加到一个 Promise 数组中以使用 Promise.all() 执行。现在，它还检查它是否是一个可观察的，并通过将订阅调用包装在一个承诺中并将完成和错误的 Observable 回调与 resolve 和拒绝 Promise 回调联系在一起来检查它是否是一个承诺。

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

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

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

【讨论】：

非常感谢您，特别是您的精彩解释。这对我帮助很大。