How to export and import component from one module to it's children module in angular

Question

I am using Angular 5.

I have a module called PostLoginPartnersModule and within it I have a component called SearchUsersComponent and another module ListingUsersModule. I want to use SearchUsersComponent in a component which exist in ListingUsersModule.

I am getting an error:

core.js:1448 ERROR Error: Uncaught (in promise): Error: Type SearchUsersComponent is part of the declarations of 2 modules: PostLoginPartnersModule and ListingUsersModule! Please consider moving SearchUsersComponent to a higher module that imports PostLoginPartnersModule and CareGroupModule. You can also create a new NgModule that exports and includes SearchUsersComponent then import that NgModule in PostLoginPartnersModule and ListingUsersModule. Error: Type SearchPatientComponent is part of the declarations of 2 modules: PostLoginPartnersModule and ListingUsersModule! Please consider moving SearchUsersComponent to a higher module that imports PostLoginPartnersModule and ListingUsersModule. You can also create a new NgModule that exports and includes SearchPatientComponent then import that NgModule in PostLoginPartnersModule and ListingUsersModule.

Answer 1

Only declare a Component in a single module. Import the module that declares and exports this Component into the modules that use it. So in this particular case ListingUsersModule should import PostLoginPartnersModule. ListingUsersModule shouldn't redeclare SearchUsersComponent.

It might be that from a design point of view importing PostLoginPartnersModule into ListingUsersModule doesn't make sense. In that case make a third module declaring and exporting the SearchUsersComponent (and other shared components) and import that module in both of the other modules.

I'd recommend not having directories with modules inside the directory of another module. This can be confusing.