title: Using Components from Another Module on a Angular/JHipster Application
body: <p>I'm trying to use a <code>component</code> from another <code>module</code> on an <strong>Angular 5</strong> application generated by <strong>jhipster</strong>. </p>
  
  <p>When a <code>module</code> that contains the <code>component</code> that I want to use is imported the <code>route</code> of the <code>module</code> where the importing occurred is overwritten by the <code>route</code> of the imported <code>module</code>.</p>
  
  <ul>
  <li><code>phone.module.ts</code> exports <code>PhoneComponent</code>.</li>
  <li><code>contact-info.module.ts</code> import <code>phone.module.ts</code>.</li>
  <li>After that, every <code>route</code> declared in <code>contact-info.route.ts</code> starts to render the components declared in the <code>phone.module.ts</code>. It appears the phone module is completely overwritten.</li>
  </ul>
  
  <h2><code>phone.module.ts</code></h2>
  
  <pre class="lang-js prettyprint-override"><code>import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  import { RouterModule } from '@angular/router';
  import { JhiLanguageService } from 'ng-jhipster';
  import { JhiLanguageHelper } from 'app/core';
  
  import { FrontendSharedModule } from 'app/shared';
  import {
      PhoneComponent,
      PhoneDetailComponent,
      PhoneUpdateComponent,
      PhoneDeletePopupComponent,
      PhoneDeleteDialogComponent,
      phoneRoute,
      phonePopupRoute
  } from './';
  
  const ENTITY_STATES = [...phoneRoute, ...phonePopupRoute];
  
  @NgModule({
      imports: [FrontendSharedModule, RouterModule.forChild(ENTITY_STATES)],
      declarations: [PhoneComponent, PhoneDetailComponent, PhoneUpdateComponent, PhoneDeleteDialogComponent, PhoneDeletePopupComponent],
      entryComponents: [PhoneComponent, PhoneUpdateComponent, PhoneDeleteDialogComponent, PhoneDeletePopupComponent],
      providers: [{ provide: JhiLanguageService, useClass: JhiLanguageService }],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      exports: [PhoneComponent]
  })
  export class BurocracyPhoneModule {
      constructor(private languageService: JhiLanguageService, private languageHelper: JhiLanguageHelper) {
          this.languageHelper.language.subscribe((languageKey: string) =&gt; {
              if (languageKey !== undefined) {
                  this.languageService.changeLanguage(languageKey);
              }
          });
      }
  }
  </code></pre>
  
  <h2><code>contact-info.module.ts</code></h2>
  
  <pre class="lang-js prettyprint-override"><code>import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  import { RouterModule } from '@angular/router';
  import { JhiLanguageService } from 'ng-jhipster';
  import { JhiLanguageHelper } from 'app/core';
  
  import { FrontendSharedModule } from 'app/shared';
  import {
      ContactInfoComponent,
      ContactInfoDetailComponent,
      ContactInfoUpdateComponent,
      ContactInfoDeletePopupComponent,
      ContactInfoDeleteDialogComponent,
      contactInfoRoute,
      contactInfoPopupRoute
  } from './';
  import { BurocracyPhoneModule } from 'app/entities/burocracy/phone/phone.module';
  
  const ENTITY_STATES = [...contactInfoRoute, ...contactInfoPopupRoute];
  
  @NgModule({
      imports: [FrontendSharedModule, BurocracyPhoneModule, RouterModule.forChild(ENTITY_STATES)],
      declarations: [
          ContactInfoComponent,
          ContactInfoDetailComponent,
          ContactInfoUpdateComponent,
          ContactInfoDeleteDialogComponent,
          ContactInfoDeletePopupComponent
      ],
      entryComponents: [ContactInfoComponent, ContactInfoUpdateComponent, ContactInfoDeleteDialogComponent, ContactInfoDeletePopupComponent],
      providers: [{ provide: JhiLanguageService, useClass: JhiLanguageService }],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
  })
  export class BurocracyContactInfoModule {
      constructor(private languageService: JhiLanguageService, private languageHelper: JhiLanguageHelper) {
          this.languageHelper.language.subscribe((languageKey: string) =&gt; {
              if (languageKey !== undefined) {
                  this.languageService.changeLanguage(languageKey);
              }
          });
      }
  }
  </code></pre>
  
  <p><code>http://localhost:8080/#/contact-info</code> <strong>Before</strong> the importing of <code>BurocracyPhoneModule</code>
  <a href="https://i.stack.imgur.com/GHDTJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GHDTJ.png" alt="Before the importing"></a></p>
  
  <p><code>http://localhost:8080/#/contact-info</code> <strong>After</strong> the importing of <code>BurocracyPhoneModule</code>
  <a href="https://i.stack.imgur.com/wyXQx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wyXQx.png" alt="After the importing"></a></p>
  
  <h1>Other files that <em>may</em> have some relation with the issue</h1>
  
  <p><em>All of the following files where gerenerated by <code>jhipster</code></em>.</p>
  
  <h2><code>phone.route.ts</code></h2>
  
  <pre class="lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { HttpResponse } from '@angular/common/http';
  import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, Routes } from '@angular/router';
  import { JhiPaginationUtil, JhiResolvePagingParams } from 'ng-jhipster';
  import { UserRouteAccessService } from 'app/core';
  import { Observable, of } from 'rxjs';
  import { filter, map } from 'rxjs/operators';
  import { Phone } from 'app/shared/model/burocracy/phone.model';
  import { PhoneService } from './phone.service';
  import { PhoneComponent } from './phone.component';
  import { PhoneDetailComponent } from './phone-detail.component';
  import { PhoneUpdateComponent } from './phone-update.component';
  import { PhoneDeletePopupComponent } from './phone-delete-dialog.component';
  import { IPhone } from 'app/shared/model/burocracy/phone.model';
  
  @Injectable({ providedIn: 'root' })
  export class PhoneResolve implements Resolve&lt;IPhone&gt; {
      constructor(private service: PhoneService) {}
  
      resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable&lt;IPhone&gt; {
          const id = route.params['id'] ? route.params['id'] : null;
          if (id) {
              return this.service.find(id).pipe(
                  filter((response: HttpResponse&lt;Phone&gt;) =&gt; response.ok),
                  map((phone: HttpResponse&lt;Phone&gt;) =&gt; phone.body)
              );
          }
          return of(new Phone());
      }
  }
  
  export const phoneRoute: Routes = [
      {
          path: '',
          component: PhoneComponent,
          resolve: {
              pagingParams: JhiResolvePagingParams
          },
          data: {
              authorities: ['ROLE_USER'],
              defaultSort: 'id,asc',
              pageTitle: 'frontendApp.burocracyPhone.home.title'
          },
          canActivate: [UserRouteAccessService]
      },
      {
          path: ':id/view',
          component: PhoneDetailComponent,
          resolve: {
              phone: PhoneResolve
          },
          data: {
              authorities: ['ROLE_USER'],
              pageTitle: 'frontendApp.burocracyPhone.home.title'
          },
          canActivate: [UserRouteAccessService]
      },
      {
          path: 'new',
          component: PhoneUpdateComponent,
          resolve: {
              phone: PhoneResolve
          },
          data: {
              authorities: ['ROLE_USER'],
              pageTitle: 'frontendApp.burocracyPhone.home.title'
          },
          canActivate: [UserRouteAccessService]
      },
      {
          path: ':id/edit',
          component: PhoneUpdateComponent,
          resolve: {
              phone: PhoneResolve
          },
          data: {
              authorities: ['ROLE_USER'],
              pageTitle: 'frontendApp.burocracyPhone.home.title'
          },
          canActivate: [UserRouteAccessService]
      }
  ];
  
  export const phonePopupRoute: Routes = [
      {
          path: ':id/delete',
          component: PhoneDeletePopupComponent,
          resolve: {
              phone: PhoneResolve
          },
          data: {
              authorities: ['ROLE_USER'],
              pageTitle: 'frontendApp.burocracyPhone.home.title'
          },
          canActivate: [UserRouteAccessService],
          outlet: 'popup'
      }
  ];
  </code></pre>
  
  <h2><code>contact-info.route.ts</code></h2>
  
  <pre class="lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { HttpResponse } from '@angular/common/http';
  import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, Routes } from '@angular/router';
  import { JhiPaginationUtil, JhiResolvePagingParams } from 'ng-jhipster';
  import { UserRouteAccessService } from 'app/core';
  import { Observable, of } from 'rxjs';
  import { filter, map } from 'rxjs/operators';
  import { ContactInfo } from 'app/shared/model/burocracy/contact-info.model';
  import { ContactInfoService } from './contact-info.service';
  import { ContactInfoComponent } from './contact-info.component';
  import { ContactInfoDetailComponent } from './contact-info-detail.component';
  import { ContactInfoUpdateComponent } from './contact-info-update.component';
  import { ContactInfoDeletePopupComponent } from './contact-info-delete-dialog.component';
  import { IContactInfo } from 'app/shared/model/burocracy/contact-info.model';
  
  @Injectable({ providedIn: 'root' })
  export class ContactInfoResolve implements Resolve&lt;IContactInfo&gt; {
      constructor(private service: ContactInfoService) {}
  
      resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable&lt;IContactInfo&gt; {
          const id = route.params['id'] ? route.params['id'] : null;
          if (id) {
              return this.service.find(id).pipe(
                  filter((response: HttpResponse&lt;ContactInfo&gt;) =&gt; response.ok),
                  map((contactInfo: HttpResponse&lt;ContactInfo&gt;) =&gt; contactInfo.body)
              );
          }
          return of(new ContactInfo());
      }
  }
  
  export const contactInfoRoute: Routes = [
      {
          path: '',
          component: ContactInfoComponent,
          resolve: {
              pagingParams: JhiResolvePagingParams
          },
          data: {
              authorities: ['ROLE_USER'],
              defaultSort: 'id,asc',
              pageTitle: 'frontendApp.burocracyContactInfo.home.title'
          },
          canActivate: [UserRouteAccessService]
      },
      {
          path: ':id/view',
          component: ContactInfoDetailComponent,
          resolve: {
              contactInfo: ContactInfoResolve
          },
          data: {
              authorities: ['ROLE_USER'],
              pageTitle: 'frontendApp.burocracyContactInfo.home.title'
          },
          canActivate: [UserRouteAccessService]
      },
      {
          path: 'new',
          component: ContactInfoUpdateComponent,
          resolve: {
              contactInfo: ContactInfoResolve
          },
          data: {
              authorities: ['ROLE_USER'],
              pageTitle: 'frontendApp.burocracyContactInfo.home.title'
          },
          canActivate: [UserRouteAccessService]
      },
      {
          path: ':id/edit',
          component: ContactInfoUpdateComponent,
          resolve: {
              contactInfo: ContactInfoResolve
          },
          data: {
              authorities: ['ROLE_USER'],
              pageTitle: 'frontendApp.burocracyContactInfo.home.title'
          },
          canActivate: [UserRouteAccessService]
      }
  ];
  
  export const contactInfoPopupRoute: Routes = [
      {
          path: ':id/delete',
          component: ContactInfoDeletePopupComponent,
          resolve: {
              contactInfo: ContactInfoResolve
          },
          data: {
              authorities: ['ROLE_USER'],
              pageTitle: 'frontendApp.burocracyContactInfo.home.title'
          },
          canActivate: [UserRouteAccessService],
          outlet: 'popup'
      }
  ];
  </code></pre>
  
  <h2><code>entity.module.ts</code></h2>
  
  <pre class="lang-js prettyprint-override"><code>import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  import { RouterModule } from '@angular/router';
  
  @NgModule({
      imports: [
          RouterModule.forChild([
  
              {
                  path: 'contact-info',
                  loadChildren: './burocracy/contact-info/contact-info.module#BurocracyContactInfoModule'
              },
              {
                  path: 'phone',
                  loadChildren: './burocracy/phone/phone.module#BurocracyPhoneModule'
              }
              /* jhipster-needle-add-entity-route - JHipster will add entity modules routes here */
          ])
      ],
      declarations: [],
      entryComponents: [],
      providers: [],
      schemas: [CUSTOM_ELEMENTS_SCHEMA]
  })
  export class FrontendEntityModule {}
  
  </code></pre>