Angular2 Router: Error: Cannot find primary outlet to load 'InboxComponent'

Another way if you want to avoid adding a <router-outlet></router-outlet> is to change the way you define your routes into the following:

const routes = [
  { path: '',
    children: [
      {
        path: '',
        component: MailListComponent
      }
    ]
  },
  { path: 'mail', 
    children: [
      {
        path: '',
        component: MailListComponent
      },
      {
        path: 'inbox', 
        component: InboxComponent
      }
    ]
  }
];

This will allow you to use the same <router-outlet></router-outlet> as above to host the new component

Your MailListComponent needs a <router-outlet> as well, because InboxComponent is defined as a child in your router configuration:

@Component({
  selector: 'app-mail-list',
  template: `
    <p>
      Mail list works!
    </p>
    <router-outlet></router-outlet>
  `,
  styleUrls: ['./mail-list.component.css']
})
export class MailListComponent {

  constructor() { }

}

If you however want to render the InboxComponent inside the same outlet, you should not add it as a child