title: Nested routing in Angular 2/4
body: <p>I work on an app which I intend to have following structure:</p>
  
  <pre><code>-MAIN -  main “container” (main routes)    
  --NCF (lazy loaded, routes for it’s subapps)    
  ---ACNP (lazy loaded)    
  ----Component1    
  ----Component2    
  ---SubApp2 (lazy loaded)    
  ---SubApp3 (lazy loaded)    
  --App2 (lazy loaded)    
  --App3 (lazy loaded)    
  --…
  </code></pre>
  
  <p>It’s starting framework for app which will have 3 levels – MAIN, apps and subapps. Every app and subapp is to be developed independently. In future there may be more lazy-loaded levels.
  I want routing to be maintained independently on each level, which means MAIN will handle routes (for lazy loading mainly) for NCF and App2 and App3; NCF will handle routes (again mostly lazy loaded) for ACNP, SubApp2 and SubApp3; ACNP will handle routes for its components.
  Here’s how it looks right now:</p>
  
  <p>MAIN-routes.ts:</p>
  
  <pre><code>import {Routes} from "@angular/router"
  
  export const appRoutes: Routes = [
    {
      path: 'ncf',
      loadChildren: './ncf/ncf.module#NewCustomerFolderModule
    }
  ]
  </code></pre>
  
  <p>MAIN.html</p>
  
  <pre><code>&lt;h1&gt;FE2&lt;/h1&gt;
  &lt;MAIN-nav&gt;&lt;/MAIN-nav&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>MAIN-nav</p>
  
  <pre><code>&lt;a [routerLink]="['/ncf']"&gt;New Customer Folder&lt;/a&gt;
  </code></pre>
  
  <p>And it works fine, inside MAIN-nav I have links which lazy load NCFModule.</p>
  
  <p>NCFModule.ts</p>
  
  <pre><code>@NgModule({
    imports: [
      CommonModule,
      RouterModule.forChild(ncfRoutes)
    ],
    declarations: [NewCustomerFolderComponent]
  })
  </code></pre>
  
  <p>ncfRoutes.ts</p>
  
  <pre><code>import {Routes} from "@angular/router"
  import { NCFComponent } from "./ncf.component"
  
  export const ncfRoutes: Routes = [
    {
      path: '',
      loadChildren: './acnp/acnp.module#AddCustomerNaturalPersonModule
    },
    {
      path: '',
      component: NCFComponent
    }
  ]
  </code></pre>
  
  <p>ncf.html</p>
  
  <pre><code>&lt;hr&gt;
  &lt;a [routerLink]="['acnp']"&gt;Load ACNP&lt;/a&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>acnp.routes (right now I just want to load one component on default)::</p>
  
  <pre><code>export const acnpRoutes: Routes = [
    {
      path: '',
      component: ACNPStepOneComponent
    }
  ]
  </code></pre>
  
  <p>Here’s where my problem begin: When I click on Load ACNP it is loaded, but it renders below first router-outlet (on MAIN level), but I want it to render below second router-outlet, defined in nfc.html.</p>
  
  <p>I tried to do it using named router outlets:</p>
  
  <p>ncf.html</p>
  
  <pre><code>&lt;hr&gt;
  &lt;a [routerLink]="['acnp', {outlets: {NCFRouterOutlet: ['acnp']}}]"&gt;Load ACNP&lt;/a&gt;
  &lt;p&gt;test&lt;/p&gt;
  &lt;router-outlet name="NCFRouterOutlet"&gt;&lt;/router-outlet&gt;
  
  acnp.routes 
  export const acnpRoutes: Routes = [
    {
      path: '',
      component: ACNPStepOneComponent,
      outlet: 'NCFRouterOutlet'
    }
  ]
  </code></pre>
  
  <p>But hen when I click on Load ACNP I get error:</p>
  
  <pre><code>core.es5.js:1084 ERROR Error: Uncaught (in promise): Error: Cannot find the outlet NCFRouterOutlet to load 'ACNPStepOneComponent' 
  </code></pre>
  
  <p>How can I make components render below closest router-outlet?</p>