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

每个类都有这样的结构：

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 {}

我该怎么解决这个问题？它可以工作，但是我有很多警告。

- Alessandro Celeghin

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

这个更改应该修复了问题。

- Ján Halaša

---

那我可以删除索引文件吗？ - Alessandro Celeghin

index.ts文件被称为“barrels”，在Angular2 R.C. 5之前非常有用，因为那时还没有NgModules。在那个时候，“barrels”是避免无数导入/导出的唯一解决方案。现在我们有了模块，它们已经过时了。https://angular.io/guide/glossary#barrel - Alex Beugnet

会导致什么问题吗？我升级 cli 后收到了相同的警告。 - QI.soa

在使用 NgModules 的同时使用桶仍然是有用的！ - Mar

即使存在 ngModule，在我看来，index.ts 仍然很有用，它可以避免无数的导入。 - Pardeep Jain

这是错误的解决方案。应该使用桶文件而不是深度导入。 - Nickon

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文件。

我之所以会收到循环依赖警告，是因为我在同一模块中使用组件的索引。

例如，我有子模块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 '../../article-card.component';

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

就是这样，问题解决了。

在我的情况下，在我需要使用article-card组件的其他库中，我只需要包含@com-tuxin/cards/src/lib/article-card，那么就不会有循环依赖了。

希望这可以澄清事情。

- ufk

---

这里对我来说关键的语句是："既然我在这个确切的模块中，我应该使用确切的路径而不是桶。" 这帮助我避免了一堆基于桶的循环依赖警告。 - peregrination