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

Viewed 359

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.

enter image description here

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

enter image description here

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

2 Answers

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.

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

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