时间戳

首页 > 解决方案 > 生成Angular库时的循环依赖

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

问题描述

编辑

似乎只有在使用生产构建时才会弹出循环依赖项-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 应用程序的角度来看，我会说这是绝对正确的，并且不会产生循环依赖。

然而！在构建项目时，我确实得到了循环依赖。如果构建文件与此类似，则输出（简化）：

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 * as i1 from '../_index'

有没有办法修复这种仅在构建代码时出现的循环依赖？

标签： angularcircular-dependencyangular-library

解决方案

一种解决方案是（在角度 12 中测试）设置compilationMode为full

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

这不是一个完美的解决方案，但它确实有效。你可以在这里
看到它的作用

此处建议另一种解决方案（使用动态组件）。

我还发现这两篇文章对此非常有用。（Angular Linker和Ivy 库编译）

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

推荐阅读