Angular 4 / Ionic 3: Shared module has a circular dependency

Question

I have a circular dependency problem I don't see how to solve. I have a page module called ItemDetailPageModule that imports a SharedModule like so:

@NgModule({
  imports: [
    IonicPageModule.forChild(ItemDetailPageComponent),
    IonicImageViewerModule,
    SharedModule
  ],
  declarations: [
    ItemDetailPageComponent,
  ],
  entryComponents: [
    ItemDetailPageComponent,
  ],
  exports: [
    ItemDetailPageComponent
  ]
})
export class ItemDetailPageModule { }

I also have a SharedModule that exports a component called ItemCardComponent that depends on ItemDetailPageModule to push a page component ( ItemDetailPageComponent ) onto the nav stack:

@NgModule({
  imports: [
    IonicModule,
    AuthenticationModalModule,
    ItemDetailPageModule
  ],
  declarations: [
    ItemCardComponent,
    AddCardFormComponent
  ],
  exports: [
    ItemCardComponent,
    AddCardFormComponent
  ]
})
export class SharedModule { }

Obviously, this creates a circular dependency. I can't figure out how to structure the code to avoid this. Any ideas on how to restructure the code to avoid the circular dependency?

Answer 1

You should use lazy loading which doesn't require you to declare ItemDetailPageModule where you need it call. You just need to navigate to it like so :

this.navCtrl.push("ItemDetailPageModule");

Notice that the push method is taking the name of the Module as a string.

This way, you keep your modules separate from each other.