Angular 4 Circular dependency detected
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.
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.