检测到Angular 5 Circular警告

Question

请告诉我这里我做错了什么，我已经浪费了一整天的时间来修复几件事。

当从不同的文件夹导入模块时，我在这里导入的是src/app/common/modules/modal/sum-modal/sum-modal.html中的preview.module

<div class="row">
    <div class="col">
        <app-preview></app-preview>
    </div>
</div>

以下是在检测到循环依赖关系中运行ng serve警告时出现的错误: src\app\common\index.ts -> src\app\common\modules\index.ts -> src\app\common\modules\modal\modal.module.ts -> ng -> src\app\common\index.ts

文件夹结构：

enter image description here

用于模块的代码(在src/app/common中)从‘./ index.ts’导出*；

用于模式(src/app/common/modules)导出的代码*从‘./ index.ts /modal.module’；

Answer 1

如何阅读这篇文章是这样的：

A导入B，导入C，导入D，D导入A，因此是循环依赖。

要修复它，请在preview.module.ts中

// import { XYZ } from './src/app/common/index.ts';
import { XYZ } from './src/app/common/XYZ/XYZ.component;

我从不从barrel文件(index.ts)导入。它会导致构建错误和这些循环依赖问题。

Answer 2

好吧，我解决了这个问题，我做了一些重构，并将预览组件/模块移动到不同的模块，而不是公共模块下。