title: child Routing in angular2 getting error
body: <p>My Page Layout look like this one</p>
  
  <pre><code>-----------------------------------------------------
  HEADER MENU --&gt; Page1  &lt;Page2&gt;
  -----------------------------------------------------
  Page1 Child1 |
  Page1 Child2 |       MAIN CONTENT
  Page1 Child2 |
  ----------------------------------------------------
            FOOTER
  ----------------------------------------------------
  </code></pre>
  
  <p>if user click on Page1 i want to Refresh the Menus on the Left to list children for Page1, if i click Page 2 than i want to refresh the list of menu and display childrens of Pages 2</p>
  
  <p>This is how my router look currently, but i am getting the error</p>
  
  <pre><code>core.umd.js:3070 EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ''
  </code></pre>
  
  <p>Error: Cannot match any routes. URL Segment: ''
      at ApplyRedirects.noMatchError </p>
  
  <p>index.html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>index.html
  
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
      
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-2"&gt;&lt;router-outlet&gt;&lt;/router-outlet&gt;&lt;/div&gt;
          &lt;div class="col-md-10"&gt;&lt;router-outlet name="main"&gt;&lt;h2&gt;Main Content Here&lt;/h2&gt;&lt;/router-outlet&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>app.module.ts
  
  
  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { AppComponent } from './app.component';
  import { Page1Component } from './Page1/Page1.component';
  import { Page1Child1Component } from './Page1/Page1Child1/Page1Child1.component';
  import { Page2Component } from './Page2/Page2.component';
  import { RouterModule } from '@angular/router';
  
  
  @NgModule({
      imports: [BrowserModule,
  
              RouterModule.forRoot([
                  { path: '', redirectTo: 'Page1', pathMatch: 'full' },
                  {
                      path: 'Page1', component: Page1Component,
                      children: [
                          { path: '', redirectTo: 'Page1Child1', pathMatch: 'full' },
                          { path: 'Page1Child1', component: Page1Child1Component }
                      ]
  
                  },
                  { path: 'Page2', component: Page2Component }
              ])
          ],
      declarations: [AppComponent, Page1Component, Page2Component, Page1Child1Component],
      bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>screenshot the UI looks as expected but there is error in the console window</p>
  
  <pre><code>core.umd.js:3070 EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load 'Page1Child1Component'
  Error: Cannot find primary outlet to load 'Page1Child1Component'
      at getOutlet 
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/dF886.jpg" rel="nofollow"><img src="https://i.stack.imgur.com/dF886.jpg" alt="enter image description here"></a></p>
  
  <p>Page1.component</p>
  
  <pre><code>import { Component } from '@angular/core';
  @Component({
      selector: 'Page1',
      template: `&lt;h1&gt;This is from Page1 &lt;/h1&gt;
      &lt;ul&gt;
    &lt;li *ngFor="let item of links; let i = index"&gt;
          &lt;a [routerLink]="['Page1Child1']" routerLinkActive="active" outlet:"main"&gt;{{item}}&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
     `
  })
  export class Page1Component {
      links: any[] = [
      'Page1 Child1',
      'Page1 Child2'
      ];
  
  }
  </code></pre>
  
  <p>Now as soon as i update the Pag1Component to use named outlet it throws parsing error.</p>
  
  <p>{{item}}</p>
  
  <p>This just blows out the whole page and nothing is displayed, console window throws the parsing error</p>
  
  <p>Error: (SystemJS) Template parse errors:(…)(anonymous function) @ (index):20ZoneDelegate.invoke @ zone.js:232Zone.run @ zone.js:114(anonymous function) @ zone.js:502ZoneDelegate.invokeTask @ zone.js:265Zone.runTask @ zone.js:154drainMicroTaskQueue @ zone.js:401ZoneTask.invoke @ zone.js:339</p>
  
  <p><strong>Is there a better way of doing this</strong></p>