Angular 4 Dépendance circulaire détectée

Question

La mise à niveau d'Angular Cli vers 1.3.1 me donne maintenant quelques avertissements

AVERTISSEMENT: Dépendance circulaire détectée: 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

Chaque classe a une structure comme ceci :

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

Ensuite, dans app.routing.ts

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

Et dans app.module

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

Comment puis-je résoudre cela? Ça fonctionne mais j'ai beaucoup d'avertissements

Answer 1

Comme l'avertissement le dit, work-session-list.routing.ts dépend de index.ts:

import { WorkSessionListComponent } from './index';

Et index.ts dépend de work-session-list.routing.ts:

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

La première dépendance n'est pas nécessaire, car vous pourriez importer WorkSessionListComponent directement depuis son fichier source:

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

Ce changement devrait résoudre le problème.

Answer 2

La réponse de Ján Halaša est correcte. Je veux expliquer quelques choses pour clarifier les choses.

index.ts ne doit pas être supprimé, il doit toujours être utilisé.

J'ai eu le même problème, dans mon cas j'avais un module principal cards avec de nombreux sous-modules à l'intérieur. (basé sur https://medium.com/@tomastrajan/the-best-way-to-architect-your-angular-libraries-87959301d3d3)

donc dans mon tsconfig.ts j'avais

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

et sous projects/cards/src/lib j'ai un répertoire pour chacun de mes modules, et chacun d'eux a un fichier index.ts.

la raison pour laquelle je recevais des avertissements de dépendances circulaires est parce que j'utilisais des barils incluant un composant dans le même module dans lequel je me trouvais.

par exemple, j'avais le sous-module article-card, et j'avais ce code :

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

donc le problème est avec import {ArticleCardComponent} from '@com-tuxin/cards/src/lib/article-card; puisque je suis dans ce module exact, je devrais utiliser le chemin exact au lieu des barils donc je l'ai remplacé par

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

et c'est tout, le problème est résolu.

et dans mon cas dans d'autres bibliothèques où j'avais besoin du composant article-card, il me suffisait d'inclure @com-tuxin/cards/src/lib/article-card et je n'aurais pas de dépendances circulaires.

j'espère que cela éclaircit les choses.