Angular 启用 ivy 时的循环依赖

Question

在我的 angular 项目中启用 ivy 后，一切都可以编译，但是在浏览器中启动应用程序时，我在应用程序 bootstrap:

期间收到以下错误

Error: Cannot instantiate cyclic dependency! ApplicationRef
    at throwCyclicDependencyError (core.js:5208)
    at R3Injector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.hydrate (core.js:11763)
    at R3Injector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.get (core.js:11590)
    at injectInjectorOnly (core.js:648)
    at ɵɵinject (core.js:653)
    at injectArgs (core.js:730)
    at Object.factory (core.js:11858)
    at R3Injector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.hydrate (core.js:11767)
    at R3Injector.push../node_modules/@angular/core/__ivy_ngcc__/fesm5/core.js.R3Injector.get (core.js:11590)
    at injectInjectorOnly (core.js:648)

我正在努力找出循环依赖的位置以及为什么它在不使用 ivy 时工作正常。我尝试使用 madge (madge --circular --extensions ts ./) 但没有发现循环依赖。

编辑：我手动检查了所有服务并验证它们之间没有循环依赖

Answer 1

事实证明，在我的 app.module 提供者中，我有一个 class 和 {provideIn: 'root'} 在 @Injectable() 中，删除修复它。

providers: [
    { provide: ErrorHandler, useClass: AppErrorHandler }
]

之前

@Injectable({ providedIn: 'root' })
export class AppErrorHandler implements ErrorHandler {

之后

@Injectable()
export class AppErrorHandler implements ErrorHandler {

我不知道为什么这在常春藤之前不是问题，即使有 AoT

Answer 2

我在更新 Angular 项目后遇到了同样的错误。在更新之前我喜欢下面并且它一直有效直到 Angular 被更新：

@NgModule({
  imports: [
    ...,
    BrowserModule
  ],
  declarations: [ErrorComponent],
  providers: [
    {
      provide: ErrorHandler,
      useClass: ErrorHandlerService,
    }
  ]  
})
export class ErrorModule { }

更新后，为了修复此错误，我已将此模块更改为：

@NgModule({
  imports: [
    ...,
    BrowserModule
  ],
  declarations: [ErrorComponent]
})
export class ErrorModule { 
  public static forRoot(): ModuleWithProviders {
    return {
      ngModule: ErrorModule,
      providers: [
        {provide: ErrorHandler, useClass: ErrorHandlerService}
      ]
    };
  }
}

Answer 3

您必须在使用 @Injectable 的任何服务中的某处注入 Router。所以你有两个选择：

解决方案 1

从您的服务构造函数中删除 router: Router 的依赖项。

解决方案 2

升级到最低 Angular 9.0.3 这解决了这个循环依赖问题。

（已在此 MR https://github.com/angular/angular/pull/35642 中修复）

Angular 启用 ivy 时的循环依赖

Angular cyclic dependency when enabling ivy

angular

circular-dependency

angular-ivy

解决方案 1

解决方案 2