Am I allowed to put a secondary router-outlet in any other component other than the AppComponent? Because currently when I do this and I try to activate it using a [routlerLink] I get an error in the console complaining that it cannot find an outlet named popup. If I move it back to AppComponent it works!

So here's the structure of my project:

app/
├──auth/
│  └──login/
│     └──login.component.ts/html/scss
├──landing/
│  ├──landing.module.ts
│  ├──landing.routing.ts
│  └──landing.component.ts/html/scss
├──app.module.ts
├──app.routing.ts
└──app.component.ts/html/scss

And here's the relevant code (landing.routing/landing.component.html):

const routes: Routes = [{
  path: '',
  component: LandingComponent,
  children: [{
    path: 'login',
    component: LoginComponent,
    outlet: 'popup'
  }]
}];

<p>
  <a [routerLink]="[{ outlets: { popup: ['login'] } }]">Login</a>
</p>
<router-outlet></router-outlet>
<router-outlet name="popup"></router-outlet>

...and finally the app.routing.ts routes:

const routes: Routes = [
    { path: 'landing', loadChildren: 'app/landing/landing.module#LandingModule' },
    { path: '', component: HomepageComponent, canActivate: [AuthGuard] },
    { path: '**', component: NotFoundComponent }
];