I have a reusable component which I'm using inside one of the core module's component and inside a feature module component. used in sidenav nav (part of core module) I imported it to the core module, However when I try to use it inside a component that is part of the feature module, I got error saying that this component is not part of this module.

my question: If a component is used in one of the core's modules component and in some of feature modules components, then what module should this reusable component be in?

I believe that it should not be a part of the shared-module as it is being used inside the core module, and it should not be in the core module as it is been used in the feature modules.

I tried to import it to the app.module but got the error If componentName is an Angular component, then verify that it is part of this module

app.module <= imported the component (also tried to export it)

@NgModule({
  declarations: [
    SvgComponent // <- component making the error
  ],
  imports: [
    // core modules
    // .
    // .
    // .
    TrCoreModule,
    SharedModule,
    TutorModule,
  ],
  providers: [
    // services
  ],
  bootstrap: [AppComponent],
  exports:[SvgComponent],
  // export:[SvgComponent]
})
export class AppModule { }

now when I use it inside a featureModule's component or the inside the coreModule's components, I got the error verify that it is part of this module

note that the component is not imported to any other module

CodePudding user response：

If in doubt, make it into a single component angular module (SCAM), the words to search online, and import the component module into any module that uses it. With angular 15 we have standalone components which is an extension of this idea. We can now build full applications without ngmodules.

@NgModule({
  imports: [AsyncPipe, MatButtonModule], // <----- e.g. anything SvgComponent needs to work
  declarations: [SvgComponent ],
  exports: [SvgComponent ],
})
export class SvgComponentModule {}