Angular 4 Circular dependency detected

Upgrading Angular Cli to 1.3.1 I have some warnings now

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

Every class have a structure like this:

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

Than in app.routing.ts

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

And in app.module

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

How can I solve this? It works but I have a lot of warnings

Solution 1:

As the warning says, work-session-list.routing.ts depends on index.ts:

import { WorkSessionListComponent } from './index';

And index.ts depends on work-session-list.routing.ts:

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

The first dependency is not necessary, since you could import WorkSessionListComponent directly from its source file:

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

This change should fix the problem.

Solution 2:

Ján Halaša answer is correct. I wanna explain some stuff to make things clear.

index.ts should not be removed, it should still be used.

I had the same problem, in my case I had a cards main modules with many submodules within it. (based on https://medium.com/@tomastrajan/the-best-way-to-architect-your-angular-libraries-87959301d3d3)

so in my tsconfig.ts I had

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

and under projects/cards/src/lib I have a directory for each off my modules, and each one of them has index.ts file.

the reason that I would get a circular dependencies warnings is because I would use barrels includes of a component in the same module that I'm in.

for example I had the sub-module article-card, and I had this 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 { }

so the problem is with import {ArticleCardComponent} from '@com-tuxin/cards/src/lib/article-card; since I'm in that exact module I should use exact path instead of barrels so I switched it with

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

and that's it, problem is resolved.

and in my case in other libraries where I needed article-card component, I would just need to include @com-tuxin/cards/src/lib/article-card and I would get no circular dependencies.

hope this cleared things up.