title: Type XYZComponent is a part of two modules, module gets confused what route to take
body: <p>Here is the scenario. I have a UserConsoleModule and ShoppingCartModule. I have a component called MyProfileComponent. When you go to /user-console, you are shown MyProfileComponent and hence I have put that in the declarations of UserConsoleModule. Now in the /shopping-cart/profile, when the user is checking out, I am showing his profile to make sure every info is ok. So I reuse and put MyProfileComponent over there and declare that component in the ShoppingCartModule. Now it says, component is part of two modules. I don't know why does it bother that it is in two modules. They are independent. Whatever components I reuse, I declare that in that particular module and I thought I am good just like declarations before R.C 5. This module thing is good, but actually creates much confusion. </p>
  
  <p>Another issue is route. I have an AdminConsoleModule, where I reuse both UserConsoleModule and ShoppingCartModule. What I did was I imported ShoppingCartModule in the imports of AdminConsoleModule. My /shopping-cart redirects to /shopping-cart/cart. So as soon as the Admin Console loads it redirects to /admin-console/cart. While it should load UserResults in the router-outlet. The router is confused. Am I doing something wrong here? </p>
  
  <p>As a part of the solution, I made a shared module, which just contains shopping-cart components and the idea was to import shared-shopping-cart.module.ts and shopping-cart.routing.ts in shopping-cart.module.ts, so that it remains decoupled. But shared modules throws an error saying router-outlet not known as my shopping-cart.component.ts has router-outlet. </p>
  
  <p>My admin-console.routing.ts</p>
  
  <pre><code>const AdminConsoleRoutes: Routes = [
      {path: '',   component: AdminConsoleComponent,
          children: [
              {path: '',  component:UserResultsComponent},
              {path: 'search',  component:UserResultsComponent},
              {path: 'user-messages',  component: MyMessagesComponent},
              {path: 'user-profile',  component: MyProfileComponent },
              {path: 'user-progress',  component: MyProgressComponent},
              {path: 'user-receipts',  component: MyReceiptsComponent},
              {path: 'user-courses',   component: MyCoursesComponent},
              {path: 'group-membership',   component: GroupMembershipComponent},
          ]
      }
  ];
  
  @NgModule({
      imports:[RouterModule.forChild(ManageUserRoutes)],
      exports:[RouterModule]
  })
  
  export class AdminConsoleRoutingModule{}
  </code></pre>
  
  <p>My AdminConsoleModule:</p>
  
  <pre><code>@NgModule({
      imports:[CommonModule, FormsModule, ShoppingCartModule, UserConsoleModule,  AdminConsoleRoutingModule],
      declarations:[AdminConsoleComponent, UserSearchComponent, UserResultsComponent],
      exports:[]
  })
  
  export class AdminConsoleModule{}
  </code></pre>
  
  <p>I am not importing my-profile and everything as UserConsole has those components.</p>
  
  <p>UserConsoleModule</p>
  
  <pre><code>@NgModule({
      imports: [CommonModule, ReactiveFormsModule, FormsModule, PrimeNGModule, UserProfileModule, MyProfileModule, UserConsoleRoutingModule, AddressModule, TranslateModule],
      declarations: [
          UserConsoleComponent,
          MyMessagesComponent,
          MyProgressComponent,
          MyReceiptsComponent,
          MyCoursesComponent,
          GroupMembershipComponent,
          MyCredentialsComponent,
          TermsAndConditionComponent,
      ],
      exports:[
          MyMessagesComponent,
          MyProgressComponent,
          MyReceiptsComponent,
          MyCoursesComponent,
          GroupMembershipComponent,
          MyCredentialsComponent,
          TermsAndConditionComponent
      ],
      providers:[]
  })
  
  export class UserConsoleModule { }
  </code></pre>
  
  <p>ShoppingCartModule</p>
  
  <pre><code>@NgModule({
      imports:[CommonModule, FormsModule, PrimeNGModule, MyProfileModule, ShoppingCartRoutingModule, AddressModule],
      declarations: [
          ShoppingCartComponent,
          CartComponent,
          ProfileComponent,
          AffiliationComponent,
          ShippingComponent,
          PaymentComponent,
          ConfirmComponent,
          OrderCompleteComponent,
      ],
      exports:[],
      providers:[]
  })
  
  export class ShoppingCartModule { }
  </code></pre>
  
  <p>shopping-cart.routing.ts</p>
  
  <pre><code>const ShoppingCartRoutes: Routes = [
      {path: '', component:ShoppingCartComponent,
          children:[
              {path: '', pathMatch:'prefix', redirectTo:'cart'},
              {path:'cart', component:CartComponent},
              {path:'profile', component:ProfileComponent},
              {path:'affiliation', component:AffiliationComponent},
              {path:'shipping', component:ShippingComponent},
              {path:'payment', component:PaymentComponent},
              {path:'confirm', component:ConfirmComponent},
              {path:'order-complete', component:OrderCompleteComponent},
          ]
      }
  ];
  
  @NgModule({
      imports:[RouterModule.forChild(ShoppingCartRoutes)],
      exports:[RouterModule]
  
  })
  
  export class ShoppingCartRoutingModule{}
  </code></pre>
  
  <p>In the imports of AdminConsoleModuel, if I put UserConsoleModule before ShoppingCartModule, then it goes to admin-console/my-profile as my UserConsoleRouting also has a redirect. </p>
  
  <p>Here is the user-console.routing.ts</p>
  
  <pre><code>const UserConsoleRoutes: Routes = [
  {path:'', component: UserConsoleComponent,
      children:[
          {path: '', pathMatch:'full', redirectTo:'my-profile'},
          {path: 'my-messages',  component: MyMessagesComponent},
          {path: 'my-profile',  component: MyProfileComponent},
          {path: 'my-progress',  component: MyProgressComponent},
          {path: 'my-courses',   component: MyCoursesComponent},
          {path: 'my-receipts', component: MyReceiptsComponent},
          {path: 'my-credentials', component: MyCredentialsComponent},
          {path: 'group-membership',   component: GroupMembershipComponent}
      ]
  }
  ];
  
  @NgModule({
      imports:[RouterModule.forChild(UserConsoleRoutes)],
      exports:[RouterModule]
  })
  
  export class UserConsoleRoutingModule{}
  </code></pre>
  
  <p>I think, the final solutions appears to make a module for each component and import it every where. :p</p>