检测到Angular 4 Circular依赖关系

Ale*_*dro 31 typescript angular-routing angular

将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
Run Code Online (Sandbox Code Playgroud)

每个类都有这样的结构:

在此输入图像描述

工作会话list.routing.ts

import { Route } from '@angular/router';
import { WorkSessionListComponent } from './index';

export const WorkSessionRoutes: Route[] = [
  {
    path: '',
    component: WorkSessionListComponent
  },
];
Run Code Online (Sandbox Code Playgroud)

Index.ts

export * from './work-session-list.component';
export * from './work-session-list.routing';
Run Code Online (Sandbox Code Playgroud)

工作会议,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 { }
Run Code Online (Sandbox Code Playgroud)

比在app.routing.ts

export const AppRoutes: Routes = [
      {
        path: 'workSession',
        loadChildren: './work-sessions/work-session-list/work-session-list.module#WorkSessionListModule'
      }
.
.
.
Run Code Online (Sandbox Code Playgroud)

app.module中

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

我怎么解决这个问题?它有效,但我有很多警告

Ján*_*aša 48

正如警告所说,work-session-list.routing.ts取决于index.ts:

import { WorkSessionListComponent } from './index';
Run Code Online (Sandbox Code Playgroud)

index.ts取决于work-session-list.routing.ts:

export * from './work-session-list.routing';
Run Code Online (Sandbox Code Playgroud)

第一个依赖项不是必需的,因为您可以WorkSessionListComponent直接从其源文件导入:

import { WorkSessionListComponent } from './work-session-list.component';
Run Code Online (Sandbox Code Playgroud)

此更改应解决问题.

  • @AlexBeugnet使用桶时,在使用NgModules时仍然很有用! (11认同)
  • `index.ts`文件被称为`桶',它在Angular2 RC 5之前很有用,因为当时没有NgModules.桶是避免无数进口/出口的唯一解决方案.现在我们有模块,它们已经过时了.https://angular.io/guide/glossary#barrel (7认同)