Angular2 Router: Error: Cannot find primary outlet to load 'InboxComponent'
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
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