Unhandled Promise rejection: Cannot find primary outlet to load component Angular2

Question

I am trying to implement login functionality using angular2-seed project as the base and referring to angular2-login-seed. But I get the following error. I had a look through the other questions asked relates to the same error but could not figure out what is wrong with my code. Please help.

Unhandled Promise rejection: Cannot find primary outlet to load 'HomeComponent' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot find primary outlet to load 'HomeComponent'

My App component code:

@Component({
  moduleId: module.id,
  selector: 'sd-app',
  viewProviders: [NameListService, HTTP_PROVIDERS],
  templateUrl: 'app.component.html',
  directives: [ROUTER_DIRECTIVES, NavbarComponent, ToolbarComponent]
})
export class AppComponent {
  constructor() {
     console.log('Environment config', Config);
  }
}

app.component.html code:

<sd-navbar><router-outlet></router-outlet></sd-navbar>

App route config:

const routes: RouterConfig = [
  {
    path: 'login',
    component: LoginComponent,
    canActivate: [UnauthenticatedGuard]
  },
  ...HomeRoutes,
];

export const APP_ROUTER_PROVIDERS = [
   provideRouter(routes),UnauthenticatedGuard, HomeComponentGuard
];

HomeRoutes code:

export const HomeRoutes = [
{
   path: '',
   component: HomeComponent,
   canActivate: [HomeComponentGuard],
   children: [
     { path: '', component: HomeComponent },
     { path: 'home', component: HomeComponent },
     { path: 'about', component: AboutComponent }
   ]
 },
 ];

Home.Component code:

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import { NameListService } from '../shared/index';

@Component({
  moduleId: module.id,
  selector: 'wrapper',
  templateUrl: 'home.component.html',
  styleUrls: ['home.component.css'],
  directives: [ROUTER_DIRECTIVES]
})
export class HomeComponent {
   newName: string;
   constructor(public nameListService: NameListService) {
      console.log("nameList: " + JSON.stringify(nameListService.get()));
   }

   addName(): boolean {
     this.nameListService.add(this.newName);
     this.newName = '';
     return false;
   }

}

Answer 1

Although this is not quite the answer that you expected, the problem that we both have (Cannot find primary outlet to load 'LocalizationListComponent') is that this is an intentional behavior.

Every parent must have <router-outlet></router-outlet>. Here is a response on github https://github.com/angular/angular/issues/10686.

I spent two entire days trying to figure this thing out. I guess removing children or loadChildren and treating everything at the same level is one of the ways to go.

This is a very confusing and undocumented feature of the router.

Answer 2

To load your templates do not use

templateUrl: 'app.html'

on the Component decorator. Instead import your template and reference it as follows

import template from './app.html';

@Component({
  selector: 'app',
  template
})