title: Angular2 - Error: Cannot find primary outlet to load 'ChildComponent'
body: <p>PS: i have referenced all the issues raised regarding this title reference and corrected those items in my code.</p>
  
  <p>I have home page (after login) which contains a <code>&lt;router-outlet name="mainoutlet"&gt;&lt;/router-outlet&gt;</code> to load its child pages. Child page are lazy loading behavior, so i have a routing structure as below (app.module.ts), but still getting a below error even its parent (HomeComponent) has <code>&lt;router-outlet&gt;</code></p>
  
  <p><code>Error: Cannot find primary outlet to load 'ChildComponent'</code></p>
  
  <p>Note: app.comonent.html has <code>&lt;router-outlet&gt;</code> already to distinguish the home controler's router i have given a name=mainoutlet.</p>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;h1&gt;
      {{title}}  
      &lt;button (click)="home()"&gt;Home&lt;/button&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/h1&gt;
  </code></pre>
  
  <p>app.compoenent.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { RouterModule, Routes, Router } from '@angular/router';
  import { NgModule } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'app works!';
  
    constructor(private router: Router) { }
  
    public home() {
      this.router.navigate(['/home'], { skipLocationChange: true });
    }
  }
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { HttpModule } from '@angular/http';
  import { RouterModule, Routes, Router } from '@angular/router';
  import { AppComponent } from './app.component';
  import { HomeComponent } from './home/home.component';
  
  
  const appRoutes: Routes = [
    { path: 'home', component: HomeComponent },
    {
      path: 'home', component: HomeComponent,
      children: [
          { path: 'child', 
          loadChildren:  "app/child/child.lazy.module#LazyModule", outlet: 'mainoutlet' }
      ]
    },
  
  ];
  
  @NgModule({
    declarations: [
      AppComponent,
      HomeComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule,
      RouterModule.forRoot(appRoutes)
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule {
  
  }
  </code></pre>
  
  <p>home.component.html</p>
  
  <pre><code>&lt;h1&gt;
    {{title}}
    &lt;button (click)="child()"&gt;childpage&lt;/button&gt;
    &lt;nav&gt;
      &lt;a [routerLink]="[{ outlets: { mainoutlet: ['child'] } }]"&gt;Contact&lt;/a&gt;    
    &lt;/nav&gt;
    &lt;router-outlet name="mainoutlet"&gt;&lt;/router-outlet&gt;
  &lt;/h1&gt;
  </code></pre>
  
  <p>home.component.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core'; 
  import { Component } from '@angular/core';
  import { RouterModule, Routes,Router } from '@angular/router';
  
  @Component({
    selector: 'home-page',
    templateUrl: './home.component.html'
  })
  export class HomeComponent {
    title = 'Home page';
    constructor(private router:Router){
  
    }  
  
    child(){
      //this.router.navigate(['/home',{outlet:{mainoutlet:'child'}}]);
      this.router.navigate(['/home', { outlets: { mainoutlet: 'child' } }]);
    }
  }
  </code></pre>
  
  <p>child.component.html</p>
  
  <pre><code>&lt;h1&gt;
     {{title}}
  &lt;/h1&gt;
  </code></pre>
  
  <p>child.component.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core'; 
  import { Component } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  
  @Component({
    selector: 'child-page',
    templateUrl: './child.component.html'
  })
  export class ChildComponent {
    title = 'Child page';
    constructor(){
    }  
  }
  </code></pre>
  
  <p>Package.json</p>
  
  <pre><code>{
    "name": "sampleroute",
    "version": "0.0.0",
    "license": "MIT",
    "angular-cli": {},
    "scripts": {
      "start": "ng serve",
      "lint": "tslint \"src/**/*.ts\"",
      "test": "ng test",
      "pree2e": "webdriver-manager update",
      "e2e": "protractor"
    },
    "private": true,
    "dependencies": {
      "@angular/common": "~2.0.0",
      "@angular/compiler": "~2.0.0",
      "@angular/core": "~2.0.0",
      "@angular/forms": "~2.0.0",
      "@angular/http": "~2.0.0",
      "@angular/platform-browser": "~2.0.0",
      "@angular/platform-browser-dynamic": "~2.0.0",
      "@angular/router": "~3.0.0",
      "core-js": "^2.4.1",
      "rxjs": "5.0.0-beta.12",
      "ts-helpers": "^1.1.1",
      "zone.js": "^0.6.23"
    },
    "devDependencies": {
      "@types/jasmine": "^2.2.30",
      "@types/node": "^6.0.42",
      "angular-cli": "1.0.0-beta.17",
      "codelyzer": "~0.0.26",
      "jasmine-core": "2.4.1",
      "jasmine-spec-reporter": "2.5.0",
      "karma": "1.2.0",
      "karma-chrome-launcher": "^2.0.0",
      "karma-cli": "^1.0.1",
      "karma-jasmine": "^1.0.2",
      "karma-remap-istanbul": "^0.2.1",
      "protractor": "4.0.9",
      "ts-node": "1.2.1",
      "tslint": "3.13.0",
      "typescript": "2.0.2"
    }
  }
  </code></pre>