Angular 4 Circular dependency detected

Question

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

Answer 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.