最新的 Angular 升级导致 NullInjectorError: R3InjectorError(n)答案

【问题标题】：Latest Angular upgrade caused NullInjectorError: R3InjectorError(n)最新的 Angular 升级导致 NullInjectorError: R3InjectorError(n)
【发布时间】：2022-06-27 07:54:37
【问题描述】：

一两个星期前，我将 Angular 升级到了 Web 应用程序中的最新版本，该版本过去可以顺利运行。现在，每次我们进入登录页面（其中注入了 [once-working] AuthService），浏览器都会返回如下错误消息：

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(n)[AuthService -> _w -> _w -> _w]: NullInjectorError: No provider for _w! NullInjectorError: R3InjectorError(n)[AuthService -> _w -> _w -> _w]: NullInjectorError: No provider for _w!

起源被追溯到 polyfill.js。我读到它与最新的 webpack 升级有关，但我找不到有关如何修复它的信息。到底发生了什么？我该如何解决这个问题？

当我关闭优化时，我得到：

Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[AuthService -> Auth -> Auth -> Auth]: NullInjectorError: No provider for Auth!

这只是稍微提供更多信息。

【问题讨论】：

您可能希望共享一些登录代码（构造函数及其类装饰器）和/或提供 AuthService 的模块。
你试过forwardRef吗？如果那不起作用，您是否尝试注入 Injector，然后仅在使用时才解决它？听起来就像是循环注射

标签： angular dependency-injection

【解决方案1】：

实际上，我想出了答案并解决了问题。基本上，我在 AuthService 模块中导入了 Auth 类，这在 Angular 13 出现之前是合适的。现在，根据本教程：

https://www.positronx.io/full-angular-firebase-authentication-system/

您应该从@angular/fire/compat/auth 导入AngularFireAuth。我重构了我的代码，它就像一个魅力。

【讨论】：

【解决方案2】：

前面的@Decorator 不见了

Injectable({
  providedIn: 'root'
})

在重构代码后将我的const 变量置于可注入对象之上，问题就解决了。所以我有这个

const AUTH_LOGIN = gql`
  mutation Login($username: String!, $password: String!) {
    login(data: {password: $password, username: $username, phone: "", domain: "transnational"}) {
      response
    }
  }
  `;

@Injectable({
  providedIn: 'root'
})

【讨论】：