Angular 库构建:模板中的循环依赖

发布于 2025-01-19 06:51:14 字数 993 浏览 2 评论 0原文

我正在努力将库从 Angular 12 升级到 Angular 13,该库在另一个 Angular 应用程序中使用。我有一个组件将以循环方式使用的情况。

示例

one.component.ts:

@Component({
  selector: 'lib-one',
  template: `<div><lib-two></lib-two></div>`,
  styles: [],
})
export class OneComponent {}

two.component.ts:

@Component({
  selector: 'lib-two',
  template: `<div><lib-one></lib-one></div>`,
  styles: [],
})
export class TwoComponent {}

当我尝试构建库时,出现如下错误:

error NG3003: One or more import cycles would need to be created to compile this component, which is not supported by the current compiler configuration.

处理此问题的一种方法是删除下面的代码来自 tsconfig.lib.prod.json

  "angularCompilerOptions": {
    "compilationMode": "partial"
  }

还有其他方法可以处理这个问题吗?

请注意,组件可以位于不同的模块中,并且根据某些条件以循环方式使用。

提前致谢。

I am working on upgrading an library from Angular 12 to Angular 13 which is used in another angular application. I have a case where components will be used in cyclic manner.

Example

one.component.ts:

@Component({
  selector: 'lib-one',
  template: `<div><lib-two></lib-two></div>`,
  styles: [],
})
export class OneComponent {}

two.component.ts:

@Component({
  selector: 'lib-two',
  template: `<div><lib-one></lib-one></div>`,
  styles: [],
})
export class TwoComponent {}

When I try to build the library, I get an error like:

error NG3003: One or more import cycles would need to be created to compile this component, which is not supported by the current compiler configuration.

One way of handling this is to remove the below code from tsconfig.lib.prod.json

  "angularCompilerOptions": {
    "compilationMode": "partial"
  }

Is there any other way to handle this?

Please note components one and two can be in different modules and are being used circular way depending on some conditions.

Thanks in advance.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

情仇皆在手 2025-01-26 06:51:14

我遇到了您上面发布的同样问题。
在这里他们建议他们将两个组件移至单个组件中。我不是Angular最有经验的人,因此,如果有人可以解释为什么这对我有用,那就太好了。但是,它有效。它允许您在部分汇编模式下使用常春藤编译,而不会抛出环状依赖性错误。这似乎不是最优雅的解决方案,但也许还有另一种我找不到的方式。

也许看看如果您想帮助您,如果您想避免将组件移动到一个共享的组件.ts文件中。

我希望这有所帮助。

I had the same issue that you posted above.
Here they suggested to move both of the components into a single component. I'm not the most experienced at angular so if someone could explain why this works to me, that would be great. But, it works. It allows you to compile using ivy in partial compilation mode without throwing the cyclic dependency error. It doesn't seem like the most elegant solution but maybe there's another way that I wasn't able to find.

Maybe have a look at this and see if it can help you, if you'd like to avoid moving the components into one shared component.ts file.

I hope this helped.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文