javascriptangularmodal-dialogangular8ng-modules

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


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?


Solution

  • 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.