title: Angular router.navigate to child redirects to 404 route instead
body: <p>I have an issue navigating to a child component from the parent.</p>
  
  <p>My app-routing is look like this:</p>
  
  <pre><code> const routes: Routes = [
      {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
      },
      {
        path: 'parent',
        component: ParentComponent,
        children: [{
            path: 'child',
            component: ChildComponent
        }]
      },
      {
        path: '404',
        component: PageNotFoundComponent
      },
      {
        path: '**',
        redirectTo: '404'
      }
  ];
  
    @NgModule({
      imports: [
        RouterModule.forRoot(routes)
      ],
      providers: [{
          provide: APP_BASE_HREF,
          useValue: '/'
      }],
      exports: [
        RouterModule
      ],
    })
  
    export class AppRoutingModule {
  
    }
  </code></pre>
  
  <p>and in the parent component I call this to navigate to the child on a button click:</p>
  
  <pre><code>this.router.navigate(['child', { relativeTo: this.route }]);
  </code></pre>
  
  <p>but I end up in 404 page instead.</p>
  
  <p>What am I missing here?</p>