title: Angular 9 route children not working on navigation
body: <p>i have a children path of the parent path but when i call it, it change the url to correct path but load ProductDetailsComponent instead of  ChangeEmailComponent </p>
  
  <p>app-routing.ts</p>
  
  <pre><code> const routes: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full'},
    { path: 'home', component: HomeComponent },
    { path:':productName/:productId', component: ProductDetailsComponent },
    { path:'perfil', component: ProfileComponent, children: [
      { path: 'email', component: ChangeEmailComponent },
    ]},
    { path: '404', component: NotFoundComponent },
    { path: '**', redirectTo: '/404'}
  ];
  
  @NgModule({
    imports: [
      RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, enableTracing: false })
    ],
    exports: [RouterModule]
  })
  </code></pre>
  
  <p>ProfileComponent.ts </p>
  
  <pre><code>this.router.navigate(['email'], { relativeTo:this.route });
  </code></pre>
  
  <p>this change the url to profile/email but open ProductDetailsComponent  instead of ChangeEmailComponent </p>