Angular 6循环依赖

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避免循环。

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