title: Angular2 Router: Error: Cannot find primary outlet to load 'InboxComponent'
body: <p>I created a simple app with routing.
  Links "<strong>http:// localhost:4200</strong>" and "<strong>http:// localhost:4200/mail</strong>" work well,</p>
  
  <p>but when I try to open a link "<strong>http:// localhost:4200/mail/inbox</strong>" I get an error: "Cannot find primary outlet to load 'InboxComponent'".</p>
  
  <p>What causes the error and how can I fix it?</p>
  
  <p>Here are my *.ts files:</p>
  
  <p><strong>app.module.ts</strong> :</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 } from '@angular/router';
  
  import { AppComponent } from './app.component';
  import { MailListComponent } from './components/mail-list/mail-list.component';
  import { FoldersComponent } from './components/folders/folders.component';
  import { InboxComponent } from './components/inbox/inbox.component';
  
  const routes = [
    { path: '',
      component: MailListComponent
     },
  
    { path: 'mail', component: MailListComponent,
        children: [
          {path: 'inbox', component: InboxComponent}
        ]
    }
  ];
  
  @NgModule({
    declarations: [
      AppComponent,
      MailListComponent,
      FoldersComponent,
      InboxComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule,
      RouterModule.forRoot(routes)
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>app.component.ts</strong> :</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    template: `
      &lt;app-folders&gt;&lt;/app-folders&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    `,
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'app works!';
  }
  </code></pre>
  
  <p><strong>folders.component.ts</strong> :</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-folders',
    template: `
      &lt;aside class="folders"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a routerLink="mail/inbox"&gt;Inbox&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/aside&gt;
    `,
    styleUrls: ['./folders.component.css']
  })
  export class FoldersComponent {
    folders: any[];
  
    constructor() { }
  
  }
  </code></pre>
  
  <p><strong>mail-list.component.ts</strong> :</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-mail-list',
    template: `
      &lt;p&gt;
        Mail list works!
      &lt;/p&gt;
    `,
    styleUrls: ['./mail-list.component.css']
  })
  export class MailListComponent {
  
    constructor() { }
  
  }
  </code></pre>
  
  <p><strong>inbox.component.ts</strong> :</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-inbox',
    template: `
      &lt;p&gt;
        inbox works!
      &lt;/p&gt;
    `,
    styleUrls: ['./inbox.component.css']
  })
  export class InboxComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>