title: Angular 4 Circular dependency detected
body: <p>Upgrading Angular Cli to 1.3.1 I have some warnings now</p>
  
  <pre><code>WARNING in Circular dependency detected: src\app\work-sessions\work-session-list\work-session-list.routing.ts
  -&gt; src\app\work-sessions\work-session-list\index.ts -&gt; src\app\work
  -sessions\work-session-list\work-session-list.routing.ts
  </code></pre>
  
  <p>Every class have a structure like this:</p>
  
  <p><a href="https://i.stack.imgur.com/tvJzJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/tvJzJ.png" alt="enter image description here"></a></p>
  
  <p><strong>work-session-list.routing.ts</strong></p>
  
  <pre><code>import { Route } from '@angular/router';
  import { WorkSessionListComponent } from './index';
  
  export const WorkSessionRoutes: Route[] = [
    {
      path: '',
      component: WorkSessionListComponent
    },
  ];
  </code></pre>
  
  <p><strong>Index.ts</strong></p>
  
  <pre><code>export * from './work-session-list.component';
  export * from './work-session-list.routing';
  </code></pre>
  
  <p><strong>work-sessions-list.module.ts</strong></p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p>Than in <strong>app.routing.ts</strong></p>
  
  <pre><code>export const AppRoutes: Routes = [
        {
          path: 'workSession',
          loadChildren: './work-sessions/work-session-list/work-session-list.module#WorkSessionListModule'
        }
  .
  .
  .
  </code></pre>
  
  <p>And in <strong>app.module</strong></p>
  
  <pre><code> @NgModule({
  imports: [
  CommonModule,
  BrowserAnimationsModule,
  FormsModule,
  RouterModule.forRoot(AppRoutes),
   })
    ],
    declarations: [
      AppComponent
    ]
    bootstrap: [AppComponent]
  })
  export class AppModule {}
  </code></pre>
  
  <p>How can I solve this? It works but I have a lot of warnings</p>