Angular 4 Обнаружена круговая зависимость

Обновление 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

У каждого класса есть такая структура:

введите описание изображения здесь

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

Чем в app.routing.ts

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

И в app.module

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

Как я могу это решить? Это работает, но у меня много предупреждений


typescript angular angular-routing
person Alessandro Celeghin    schedule 08.09.2017    source источник

Ответы (2)


arrow_upward
75
arrow_downward

Как сказано в предупреждении, work-session-list.routing.ts зависит от index.ts:

import { WorkSessionListComponent } from './index';

И index.ts зависит от work-session-list.routing.ts:

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

В первой зависимости нет необходимости, поскольку вы можете импортировать WorkSessionListComponent прямо из исходного файла:

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

Это изменение должно решить проблему.

person Ján Halaša    schedule 08.09.2017
comment
Значит, я могу удалить индексный файл? - person Alessandro Celeghin; 08.09.2017
comment
Файлы index.ts известны как barrels, которые использовались до Angular2 R.C. 5, потому что в то время не было NgModules. Бочки были единственным решением, позволяющим избежать бесчисленного импорта / экспорта. Теперь, когда у нас есть модули, они устарели. angular.io/guide/glossary#barrel - person Alex Beugnet; 08.09.2017
comment
это вызовет что-то не так? Я получаю такое же предупреждение после обновления cli - person QI.soa; 13.09.2017
comment
@AlexBeugnet Использование бочек по-прежнему полезно при наличии NgModules! - person Mar; 24.04.2018
comment
Даже при наличии ngModule IMO index.ts выгодно избежать бесчисленного импорта. - person Pardeep Jain; 08.02.2019
comment
Это неправильное решение. Файлы бочек следует использовать вместо глубокого импорта. - person Nickon; 28.01.2020

arrow_upward
3
arrow_downward

Ответ Яна Халаши правильный. Я хочу кое-что объяснить, чтобы прояснить ситуацию.

index.ts не следует удалять, его следует использовать.

У меня была такая же проблема, в моем случае у меня было cards основных модуля со множеством подмодулей внутри. (на основе https://medium.com/@tomastrajan/the-best-way-to-architect-your-angular-libraries-87959301d3d3)

так что в моем tsconfig.ts у меня было

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

и в projects/cards/src/lib у меня есть каталог для каждого из моих модулей, и каждый из них имеет index.ts файл.

Причина, по которой я получаю предупреждения о циклических зависимостях, заключается в том, что я бы использовал бочки, включающие компонент в том же модуле, в котором я нахожусь.

например, у меня был подмодуль article-card, и у меня был этот код:

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

так что проблема с import {ArticleCardComponent} from '@com-tuxin/cards/src/lib/article-card;, так как я нахожусь в этом точном модуле, я должен использовать точный путь вместо бочек, поэтому я переключил его с помощью

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

и все, проблема решена.

а в моем случае в других библиотеках, где мне нужен компонент article-card, мне просто нужно было бы включить @com-tuxin/cards/src/lib/article-card, и я бы не получил циклических зависимостей.

надеюсь, это прояснило ситуацию.

person ufk    schedule 19.09.2020
comment
Ключевым утверждением для меня здесь является то, что поскольку я нахожусь в этом точном модуле, я должен использовать точный путь вместо бочек. Это помогло мне избавиться от кучи предупреждений о циклической зависимости на основе бочки. - person peregrination; 06.04.2021