Angular 4 - Child routes and using two route outlets

Question

I've already read all solutions regarding this on portal, but couldn't find the right solution. The thing is like this:

I have one component:

import {Component} from '@angular/core';

@Component({
  selector: 'component-one',
  template: 'Component One'
})
export class ComponentOne { 

}

and two child components:

import { Component } from '@angular/core';

@Component({
  selector: 'child-one',
  template: 'Child One'
})
export class ChildOne { 
}

import { Component } from '@angular/core';

@Component({
  selector: 'child-two',
  template: `

    <nav>
      <a [routerLink]="['child-one']">Child One</a><br />
      <a [routerLink]="['child-two']">Child two</a><br />
    </nav>
  <router-outlet></router-outlet>
  `
})
export class ChildTwo { 
}

What I want to achieve when you click on ComponentOne route is that I'm redirected to child-two component which contains template with another router outlet.

this is how routes look:

import { Routes, RouterModule } from '@angular/router';
import ComponentOne from './component-one';
import ComponentTwo from './component-two';
import ChildOne from './child-one';
import ChildTwo from './child-two';

export const routes: Routes = [
  { path: '', redirectTo: 'component-two', pathMatch: 'full' },
  { path: 'component-two', component: ComponentTwo },
  { path: 'component-one', component: ComponentOne,
    children: [
      { path: '', redirectTo: 'child-two', pathMatch: 'full' },
      { path: 'child-one', component: ChildOne },
      { path: 'child-two', component: ChildTwo }
    ]
  }
];

export const appRoutingProviders: any[] = [

];

export const routing = RouterModule.forRoot(routes);

In app.component.html I have:

import {Component} from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app',
  template: `
    <nav>
      <a [routerLink]="['/component-one']">Component One</a>
      <a [routerLink]="['/component-two']">Component Two</a>
    </nav>


    <div style="color: green; margin-top: 1rem;">Outlet:</div>
    <div style="border: 2px solid green; padding: 1rem;">
      <router-outlet></router-outlet>
    </div>
  `
})
export class AppComponent {

}

The error I've got is: Uncaught (in promise): Error: Cannot find primary outlet to load 'ChildTwo' Error: Cannot find primary outlet to load 'ChildTwo'

Does anyone know what the problem is? I added router outlet inside child-two component and also inside app.component.

If someone needs to know, this is the structure of application: Thank you!

Answer 1

As resolved in the comment, your ComponentOne needs a <router-outlet>. You tell Angular in the router config that ComponentOne has children (child routes), but there's no outlet to render it to.

Sometimes it's not a problem that you would immediatelly see - but you have a fullRedirect on '', so the problem state gets triggered immediately.

In short, if a given route configuration has children, that component needs a router outlet.