Nested angular components in projects with multiple modules like JHipster

Question

I'm trying to show an entity component in another Entity component.

I found some information about shared modules online, I also checked this post but it's still not working for me.

Answer 1

Well, it gets a little bit complicated when you have multiple modules in your project. In a project like the ones generated by JHipster there are several modules in the project.

But no worries, the solution is easy:

Assuming the entity component supposed to get displayed inside another component is ReviewComponent and also assuming there is a review.module for all the Review-related components, you should export ReviewComponent in review.module:

@NgModule({ 
imports: [ByubSharedModule, RouterModule.forChild(ENTITY_STATES)],
    exports: [
        ReviewComponent
    ],
    declarations:...

And let's say the component which is supposed to display ReviewComponent inside is BusinessComponent and there is a business.module for Business-related components. You should import the Review module into it:

@NgModule({
    imports: [ByubSharedModule, ByubReviewModule, RouterModule.forChild(ENTITY_STATES)],
    declarations: [...

Then you’ll be fine to use the selector in any Business-related html component