Question

我在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

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

Answer 1

您的导入中存在一些问题。要了解此错误：

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

a.ts

import { b } from './b';

export function a() {
    console.log('function: a');
}

b();

b.ts

import { a } from './a';

export function b() {
    a();
    console.log('function: b');
}

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

这是一个非常简单的示例，但是在复杂的文件结构中这可能会花费很长时间！

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

只需将以上任何功能移至同一文件，即可避免导入问题
将 a.ts 中的函数调用逻辑分离到新文件 c.ts 中，然后将两个函数导入其中。

也许还有更多解决方案。

人们通常会做什么，将所有组件文件导入到该目录的index file中，然后从那里重新导出，这是问题开始的地方。

您的问题就是这种情况的完美示例，为避免此类问题，您应该直接从原始文件而不是index file导入依赖项，以免发生循环。

仍然存在问题，为了进一步解决它，找出常见的依赖项并将其分离到文件中，然后将其导入所有依赖文件中。

Answer 2

它是在为某个组件提供路径时出现的，而不是在路由模块中组件属性中的组件名称，而必须是模块名称

只需检查您在路由文件中是否正确输入了组件名称。

Angular 6循环依赖

2 个答案: