angular - 生成 Angular 库时的循环依赖

Question

编辑

似乎只有在使用生产构建时才会弹出循环依赖 - ng build lib --prod

---

我正在生成一个 Angular 库以用于不同的 Angular 项目。但是，在编译代码时，我的一个桶中出现循环依赖警告。这是我的代码:

modal.controller.ts

import { BackdropController } from './backdrop-controller';

export class ModalController {
  ...
}

免责声明:BackdropController 不导入 ModalController 或 Barrel (index.controller.ts)

index.controllers.ts

export * from './backdrop-controller';
export * from './modal-controller';

现在上面的代码对我来说似乎是正确的。 ModalController 仅直接导入 BackdropController 而不是从桶中导入任何内容。从 Angular 应用程序的 Angular 来看，我会说这是绝对正确的，不会产生循环依赖。

但是!在构建项目时，我确实得到了循环依赖。如果构建文件与此类似，则输出(简化):

index.controller.js

export * from './backdrop.controller';
export * from './modal.controller';

modal.controller.js

import { BackdropController } from '../backdrop/backdrop.controller';
import * as i0 from '@angular/core';
import * as i1 from '../_index';

export class ModalController {
  ...
}
new i1.ModalController(...)

编译代码中的问题似乎是模块构建。在第 3 行，桶被导入为 import * as i1 from '../_index'，然后 ModalController 最后添加到模块 i1 - import * 作为来自 '../_index' 的 i1

有没有办法解决这种只在构建代码时出现的循环依赖？

Answer 1

一个解决方案是(在 Angular 12 中测试)将 compilationMode 设置为 full

{
  "extends": "./tsconfig.lib.json",
  "compilerOptions": {
    "declarationMap": false
  },
  "angularCompilerOptions": {
    "compilationMode": "full"
  }
}

这不是一个完美的解决方案，但它确实有效。
你可以看到它做了什么here

建议使用另一种解决方案(使用动态组件)here .

我还发现这两篇文章对此非常有用。 ( Angular Linker 和 Ivy library compilation )

如果它确实解决了您的问题，请告诉我。