How to access a reusable component from one another reusable component and a container component

Question

In our Angular 8 project, we have a container component for user registration (user.registartion). Also, we have a reusable component for updating the user information (user.component). Both components has to show a 'user policy' pop-up which is also a reusable component (policy.component). The following picture shows my project structure.

But I can't show the Policy popup in both components. It showing the following error on the user registration page.

How can I access the 'Policy' Component from both the User registration and the User Information component?

Answer 1

You need to create a Shared Module to share components across many modules (and everything you want shared, like pipes, directives etc). There is an example in the docs how to use one:

// ...

@NgModule({
 imports:      [ CommonModule ],
 declarations: [ ... your components etc... ],
 exports:      [ ... your components etc... ]
})
export class SharedModule { }

Remember to import CommonModule to the imports array in your shared module, and export your components. Then import the shared module to your other modules.

Answer 2

You need to import SharedModule on UserRegistrationModule... something like this:

@NgModule({
  // ...
  imports: [
    CommonModule,
    SharedModukle, // <--- 
  ],
  // ...
})
export class UserRegistrationModule {}