angular - How to Access a component declared in parent module

Question

Angular component does not recognize a component declared in the module its declared in. I am able to use the CommentsComponent in the ChildComponent, but not child module. I tried creating a shared module which was imported into the parent module and then exported to the child module. However that gave me a Firebase error. When i try to declare the CommentsComponent directly in the ChildModule It gives me this error:

CommentsComponent is part of the declarations of 2 modules: TabsModule and DocDetailModule!

however when I declare it in the parent module only or directly in the child module it does not recognize the component

I tried many different approaches but had no luck.

Parent module:

 imports:[childModule  // page component with module and routing]

    declarations: [
   ...
    ChildComponent //no module
    CommentsComponent,
   ... 
   
  ],`

Declaring the CommentsComponent in a module and exporting it to other modules:

// Comments.module.ts: (module being shared)

 @NgModule({
   imports: [
    CommonModule,
    ...
  ],
  declarations: [
    CommentsComponent,
  
],
exports: [CommentsComponent]

// child module that requires the component:

  @NgModule({
   imports: [
    CommonModule,
   ...
  ],
  declarations: [...],
  entryComponents: [...],
})

// parent module which encapsulates the child module and child component:

   @NgModule({
   imports: [
    ...
    CommentsModule,
    
    DocDetailModule,]

// the component works with firebase errors (((

Uncaught (in promise): FirebaseError: [code=invalid-argument]:     
Function Query.where() requires a valid third argument, but it was     
 undefined.

Answer 1

If you want to use a component which will be use in multiple modules so just create a shared module and then use that sharedModule at every place you want to use that generic component. Just create a shared module and generate commentsComponent in that like this

directory structure

shared(module)
  components
    commentsComponent
      comments.component.ts
      comments.component.html
  share.module.ts

and inside of shared.module.ts just do this

declarations: [CommentsComponent]
exports: [commentsComponent]

Include your shared components in exports array so that you can access in your any module.

Now when you want to use your comments.component let say in your module1 so just do this in your module1.module.ts

import { SharedModule } from 'path-to-shared-module';

imports : [SharedModule]

In this way you can use your shared components in multiple modules of your app.