title: Importing a lazy-loaded module with routes in a module with a route breaks routing
body: <p>Our angular 4.3.6 application has lazy-loaded modules, such as Fleet, Maintenance, Car, etc.</p>
  
  <p>My top-level app router looks like this:</p>
  
  <pre><code>const routes: Routes = [
    { path: '', redirectTo: 'fleet', pathMatch: 'full' },
    {
      path: '',
      component: AppComponent,
      canActivate: [AuthenticationGuard],
      children: [
        {
          path: 'fleet',
          loadChildren: "./modules/fleet.module",
          canActivate: [AuthenticationGuard]
        },
        {
          path: 'car/:id',
          loadChildren: "./modules/car.module",
          canActivate: [AuthenticationGuard]
        },
        {
          path: 'maintenanceProgram',
          loadChildren: "./modules/maintenanceProgram.module",
          canActivate: [AuthenticationGuard]
        }
  }
  </code></pre>
  
  <p>We do have a <em>shared</em> module with generic components (we have lots of them) used throughout the application. There are, however, some components like modals which are shared only by the <code>MaintenanceProgram</code> and the <code>Car</code> modules, but not used anywhere else.</p>
  
  <p>In an effort to keep the shared module reasonable, I include these once-reused components only in the <code>MaintenanceProgram</code> module, export them, and import the <code>MaintenanceProgram</code> module into the <code>Car</code> module to have access to the exported components.</p>
  
  <p>Both the <code>Car</code> and <code>MaintenanceProgram</code> modules have the following embedded child routes invoked in their respective <code>@NgModule.imports[]</code>:</p>
  
  <p>Car:</p>
  
  <pre><code>const CarModuleRoutes = RouterModule.forChild([
    {
      path: '',
      component: CarComponent,
      canActivate: [AuthenticationGuard]
    },
    {
      path: ':id',
      component: CarComponent,
      canActivate: [AuthenticationGuard]
    }
  ]);
  </code></pre>
  
  <p>and Maintenance Program:</p>
  
  <pre><code>const MaintenanceProgramModuleRoutes = RouterModule.forChild([
    {
      path: '',
      component: MaintenanceProgramComponent,
      canActivate: [AuthenticationGuard]
    }
  ]);
  </code></pre>
  
  <p>This is obviously not the correct approach either</p>
  
  <ol>
  <li>to child routing, or</li>
  <li>to module transclusion</li>
  </ol>
  
  <p><strong>because when I load the Car route, I get the Maintenance Program's default route</strong>.</p>
  
  <p>I have tried:</p>
  
  <ol>
  <li>Changing the order of the import of <code>MaintenanceProgramModuleRoutes</code> and <code>CarModuleRoutes</code> in <code>CarModule</code>'s <code>@NgModule.imports[]</code>,</li>
  <li>Removing the empty path from CarModule.</li>
  </ol>
  
  <p>*Is the only solution to create <em>another</em> shared module that contains the shared components without a router, or is there another, more elegant way to do this?*</p>
  
  <p>This is a reduced example, we actually have many routes and hundreds of components which are reused only twice or three times. This problem will surely persist into the future as the application grows, so I need a scalable and maintainable solution. Creating tens or more extra shared modules is just infeasible.</p>