2

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?

Vignesh VS
  • 921
  • 1
  • 14
  • 30
  • is shared module is imported in user registration module? – Taimoor Qureshi May 08 '21 at 14:37
  • Does this answer your question? [How to put a component inside another component in Angular2?](https://stackoverflow.com/questions/43492519/how-to-put-a-component-inside-another-component-in-angular2) – crg May 08 '21 at 14:37
  • Difficult to answer your question without code. Or else you don't know at all how to import the component so the answer bellow or the official angular doc might help you. – crg May 08 '21 at 14:39

2 Answers2

2

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.

AT82
  • 71,416
  • 24
  • 140
  • 167
  • By creating a single shared module it eventually grow too large and even if another module is using only one component from the shared module we are still importing the whole shared module I'm facing this problem, can we break the shared modules into furthur smaller modules like separate modules for autocomplete/searchbox, separate module for input/textarea separate module for checkbox/radio button etc because we have our own custom components for these? Is is a good practice or bad? To have these much smaller modules? – Seerat Ahmed Jan 17 '22 at 05:58
0

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

@NgModule({
  // ...
  imports: [
    CommonModule,
    SharedModukle, // <--- 
  ],
  // ...
})
export class UserRegistrationModule {}
manzapanza
  • 6,087
  • 4
  • 39
  • 48