Angular 角6循环依赖

我在Angular 6应用程序中遇到以下错误。实际上已经很久了，我正在尝试将旧的Angular 4应用升级到Angular 6

WARNING in Circular dependency detected:
src/app/resources/index.ts -> 
src/app/resources/models/filters/sowSearch.model.ts -> 
src/app/shared/services/index.ts -> 
src/app/shared/services/rest/http.interceptor.ts -> 
src/app/resources/index.ts

---

请告知有什么问题或需要更多信息。

您的导入存在一些问题。要理解此错误，请执行以下操作：

假设有两个文件a.ts和b.ts

a.ts

从“/b”导入{b}；
导出函数a（）{
log（'function:a'）；
}
b（）；

b.ts

从“/a”导入{a}；
导出函数b（）{
a（）；
log（'function:b'）；
}

在这里我们可以看到文件a.ts依赖于b.ts，而文件b.ts依赖于a.ts，因此它会创建一个循环来首先加载哪个文件

这是一个非常简单的示例，但在复杂的文件结构中可能需要很长的周期

上述问题可以通过多种方式解决：

• 只需将上述任何函数移动到同一个文件，即可避免导入问题
• 将a.ts中的函数调用逻辑分离到一个新文件c.ts，并将两个函数导入其中，等等

可能还有更多的解决方案

通常，人们会将所有组件文件导入该目录的

索引文件

，然后从那里重新导出，这就是问题的起点

您的问题就是这种情况的完美例子，为了避免此类问题，您应该直接从原始文件导入依赖项，而不是从

索引文件导入依赖项，以避免循环

但问题可能仍然存在，要进一步解决它，请找出常见的依赖项并将其放到单独的文件中，然后将其导入到所有依赖文件中。
导入过程中存在一些问题。要理解此错误，请执行以下操作：

假设有两个文件a.ts和b.ts

a.ts

从“/b”导入{b}；
导出函数a（）{
log（'function:a'）；
}
b（）；

b.ts

从“/a”导入{a}；
导出函数b（）{
a（）；
log（'function:b'）；
}

在这里我们可以看到文件a.ts依赖于b.ts，而文件b.ts依赖于a.ts，因此它会创建一个循环来首先加载哪个文件

这是一个非常简单的示例，但在复杂的文件结构中可能需要很长的周期

上述问题可以通过多种方式解决：


只需将上述任何函数移动到同一个文件，即可避免导入问题
将a.ts中的函数调用逻辑分离到一个新文件c.ts，并将两个函数导入其中，等等

可能还有更多的解决方案

通常，人们会将所有组件文件导入该目录的
索引文件
，然后从那里重新导出，这就是问题的起点

您的问题就是这种情况的完美例子，为了避免此类问题，您应该直接从原始文件导入依赖项，而不是从
索引文件导入依赖项，以避免循环

但问题可能仍然存在，要进一步解决这个问题，请找出常见的依赖项并将其放到单独的文件中，然后将其导入所有依赖文件。
当您在路由模块的组件属性中指定某个组件的路径，而不是组件名称时，您必须指定模块名称

只需检查您在路由文件中给出的组件名称是否正确。
当您给出某个组件的路径时，必须给出模块名称，而不是路由模块中组件属性中的组件名称

只需检查路由文件中的组件名称是否正确。
最简单的方法是显式导入，而不是使用索引。您的服务和资源似乎相互依赖，因此通过索引导出它们将创建循环，从而产生循环依赖。最简单的方法是显式导入，而不使用索引。您的服务和资源似乎相互依赖，因此通过索引导出它们将创建循环，从而产生循环依赖。