title: Angular nested children routing error: "Cannot match any routes. URL Segment'"
body: <p>So far in this project I have a main component with lazy-loading, and I want to load a modal using routes, so I can access specific content with just the url. But I'm getting an error when trying to access the child route. My code:</p>
  <p>My App routing module:</p>
  <pre><code>const routes: Routes = [
    {
      path: 'users',
      loadChildren: () =&gt; import('./users-list/users-list.module').then(m =&gt; m.UsersListModule)
    },
    {
      path: '',
      redirectTo: 'users',
      pathMatch: 'full'
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  <p>UsersListComponent loads just fine. Here is the UsersListRoutingModule:</p>
  <pre><code>import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  import { UserModalComponent } from '../shared/components/user-modal/user-modal.component';
  import { UsersListComponent } from './users-list.component';
  
  const routes: Routes = [
    {
      path: '',
      component: UsersListComponent,
      children: [
        {
          path: &quot;child&quot;,
          component: UserModalComponent
        }
      ]
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
  })
  export class UsersListRoutingModule { }
  </code></pre>
  <p>UsersListModule:</p>
  <pre><code>import { UsersListRoutingModule } from './users-list-routing.module';
  import { UserModalComponent } from '../shared/components/user-modal/user-modal.component';
  @NgModule({
    declarations: [],
    imports: [
      CommonModule,
      UsersListRoutingModule
    ]
  })
  export class UsersListModule { }
  </code></pre>
  <p>I have a router-outlet in the UsersListComponent:</p>
  <pre><code>&lt;div class=&quot;table&quot;&gt;
      &lt;app-table
          [data]=&quot;usersDataSource&quot;
          [displayedColumns]=&quot;tableColumns&quot;
          (onViewAction)=&quot;showUserInfo($event)&quot;
      &gt;
      &lt;/app-table&gt;
  &lt;/div&gt;
  
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  <p>On the event click of a button in the app-table component, it triggers the &quot;showUserInfo()&quot;, which it's being called. It executes the following code:</p>
  <pre><code>showUserInfo(user: UserData) {
      this.selectedUserData = user;
      this.router.navigate(['/child']);
  }
  </code></pre>
  <p>But when it redirects to the child root, I get this error:</p>
  <blockquote>
  <p>vendor.js:29385 ERROR Error: Uncaught (in promise): Error: Cannot
  match any routes. URL Segment: 'child' Error: Cannot match any routes.
  URL Segment: 'child'</p>
  </blockquote>
  <p>I already tried using:</p>
  <pre><code>this.router.navigate(['child']);
  </code></pre>
  <p>and:</p>
  <pre><code>this.router.navigate(['child'], { relativeTo: this.route }]);
  </code></pre>
  <p>and even:</p>
  <pre><code>this.router.navigate(['/child'], { relativeTo: this.route }]);
  </code></pre>
  <p>What am I missing here?</p>