2

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

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 中是如何工作的？如何修复或更新代码以使其再次工作？也许有更好的方法在启动时初始化服务？

4

1 回答 1

2

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

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

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

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

useFactory: (service: MetaService) => () => { }
于 2021-06-02T15:27:35.907 回答