0

I have an Angular app and an app.module.ts file which contains two child modules.

Here is some reduced code:

// app.module.ts
@NgModule({
  imports: [
    AssetsModule,
    SharedModule
  ]

The problem is that my AssetsModule contains components that are used in the SharedModule and my SharedModule contains components that are used in my AssetsModule.

I added the desired module to the imports of the appropriate module file, like so (please note that my modules contain many components, I just have one here for readability)

// assets.module.ts
@NgModule({
  declarations: [AssetsComponent],
  imports: [
    CommonModule,
    SharedModule
  ],
  exports: [AssetsComponent]
})
export class AssetsModule {}


// shared.module.ts
@NgModule({
  declarations: [ChartComponent],
  imports: [
    CommonModule,
    AssetsModule
  ],
  exports: [ChartComponent]
})
export class SharedModule {}

Now the IDE gives me an issue and my application crashes in the browser.

Cyclic dependency between modules: SharedModule -> AssetsModule -> SharedModule Inspection info: Reports cyclic dependencies between Angular modules.

How do I resolve this error?

I could just have all components declared in the app.module.ts but that isn't very elegant, modular and it may even be an anti-pattern. I don't want to combine the two modules into one as I will have other modules that will need to share components.

Avius
  • 5,504
  • 5
  • 20
  • 42
NewToAngular
  • 975
  • 2
  • 13
  • 23
  • This has been asked a dozen times, and the main answer is always the same - restructure your application. https://stackoverflow.com/questions/52392550/angular-circular-module-import – Avius Jul 07 '21 at 11:47

1 Answers1

1

You need restructure your app structure.

You have basically two options.

Narrow dependencies, and import only from one side

Or declare third module and move there components used in both (in this case I would use name "shared" for a the new one

farincz
  • 4,943
  • 1
  • 28
  • 38