Search code examples
angularmodulecomponentsjhipstershared

Nested angular components in projects with multiple modules like JHipster

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.

Solution

  • 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