Angular 4 检测到循环依赖

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

每个 class 都有这样的结构：

work-session-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';

work-sessions-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

Ján Halaša 回答正确。我想解释一些东西让事情更清楚。

index.ts不应该去掉，还是要用的

我遇到了同样的问题，在我的例子中，我有一个 cards 主模块，里面有很多子模块。（基于 https://medium.com/@tomastrajan/the-best-way-to-architect-your-angular-libraries-87959301d3d3）

所以在我的 tsconfig.ts 我有

"@com-tuxin/cards/*": [
 "projects/cards/*",
 "projects/cards"
],
"@com-tuxin/cards": [
 "dist/cards/*",
 "dist/cards"
]

在 projects/cards/src/lib 下，我的每个模块都有一个目录，每个模块都有 index.ts 文件。

我会收到循环依赖性警告的原因是因为我会在我所在的同一模块中使用包含组件的桶。

例如我有 sub-module 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 组件的其他库中，我只需要包含 @com-tuxin/cards/src/lib/article-card 并且我不会得到循环依赖。

希望这一切都解决了。

Angular 4 检测到循环依赖

Angular 4 Circular dependency detected

typescript

angular-routing

angular