检测到Angular 4 Circular依赖关系

Question

将Angular Cli升级到1.3.1我现在有一些警告

WARNING in Circular dependency detected: src\app\work-sessions\work-session-list\work-session-list.routing.ts
-> src\app\work-sessions\work-session-list\index.ts -> src\app\work
-sessions\work-session-list\work-session-list.routing.ts

每个班级都有这样的结构：

工作会话list.routing.ts

import { Route } from '@angular/router';
import { WorkSessionListComponent } from './index';

export const WorkSessionRoutes: Route[] = [
  {
    path: '',
    component: WorkSessionListComponent
  },
];

Index.ts

export * from './work-session-list.component';
export * from './work-session-list.routing';

工作的会话-list.module.ts

import { WorkSessionListComponent } from './work-session-list.component';
import { WorkSessionRoutes } from './work-session-list.routing';
import { DataTableModule } from 'primeng/primeng';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

@NgModule( {
    imports: [RouterModule.forChild( WorkSessionRoutes ), CommonModule , FormsModule],

    declarations: [WorkSessionListComponent],
    exports: [WorkSessionListComponent]
} )

export class WorkSessionListModule { }

比 app.routing.ts

export const AppRoutes: Routes = [
      {
        path: 'workSession',
        loadChildren: './work-sessions/work-session-list/work-session-list.module#WorkSessionListModule'
      }
.
.
.

在 app.module

中

 @NgModule({
imports: [
CommonModule,
BrowserAnimationsModule,
FormsModule,
RouterModule.forRoot(AppRoutes),
 })
  ],
  declarations: [
    AppComponent
  ]
  bootstrap: [AppComponent]
})
export class AppModule {}

我该如何解决这个问题？它有效，但我有很多警告

Answer 1

如警告所示，work-session-list.routing.ts取决于index.ts：

import { WorkSessionListComponent } from './index';

而index.ts取决于work-session-list.routing.ts：

export * from './work-session-list.routing';

第一个依赖项不是必需的，因为您可以直接从其源文件导入WorkSessionListComponent：

import { WorkSessionListComponent } from './work-session-list.component';

此更改应解决问题。

Answer 2

JanHalaša的回答是正确的。我想解释一些东西以使事情变得清楚。

ping2 guo3不应删除，仍应使用。

我遇到了同样的问题，就我而言，我有一个index.ts主模块，其中包含许多子模块。 （基于https://medium.com/@tomastrajan/the-best-way-to-architect-your-angular-libraries-87959301d3d3）

所以在我的cards中

tsconfig.ts

在"@com-tuxin/cards/*": [ "projects/cards/*", "projects/cards" ], "@com-tuxin/cards": [ "dist/cards/*", "dist/cards" ] 下，每个模块都有一个目录，每个模块都有projects/cards/src/lib文件。

之所以收到循环依赖关系警告，是因为我将在我所在的同一模块中使用桶式包含组件的组件。

例如，我有子模块index.ts，并且我有以下代码：

article-card

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import {ArticleCardComponent} from '@com-tuxin/cards/src/lib/article-card; import {MatCardModule} from '@angular/material/card'; import {MatButtonModule} from '@angular/material/button'; @NgModule({ declarations: [ ArticleCardComponent ], imports: [ CommonModule, MatCardModule, MatButtonModule, ], exports: [ ArticleCardComponent ] }) export class ArticleCardModule { } 是问题所在，因为我在那个确切的模块中，我应该使用确切的路径而不是桶，所以我用了它

import {ArticleCardComponent} from '@com-tuxin/cards/src/lib/article-card;

就这样，问题就解决了。

在我需要import {ArticleCardComponent} from '@com-tuxin/cards/src/lib/article-card/article-card.component'; 组件的其他库中，我只需要包含article-card，就不会得到循环依赖。

希望这可以清除一切。