时间戳

首页 > 解决方案 > Angular 6 循环依赖

angular - 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

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

标签： angular

解决方案

您的导入存在一些问题。要理解这个错误：

假设有两个文件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以避免循环。

问题可能仍然存在，要进一步解决它，找出常见的依赖关系并将其带到单独的文件中，然后将其导入所有依赖文件。

推荐阅读