title: Angular nested routes cannot load page by child path
body: <p>I have children in routes:</p>
  <pre><code>   RouterModule.forRoot([
        { path: '', component: DashboardComponent, pathMatch: 'full' },
        {
          path: 'app-main', component: AppMainComponent,
          children: [
            { path: '', redirectTo: 'guarantee', pathMatch: 'full' },
            { path: 'guarantee', component: GuaranteeComponent },
          ]
        },
        { path: 'login', component: LoginComponent },
        { path: 'register', component: RegisterComponent }
  </code></pre>
  <p>My <code>app.component.html</code> looks like:</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And my <code>app-main.component.html</code> looks like:</p>
  <pre><code>&lt;div class=&quot;site d-flex&quot;&gt;
    &lt;div class=&quot;right-side&quot;&gt;
      &lt;div class=&quot;content d-flex flex-column&quot;&gt;
        &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>When I type in browser <code>localhost:4200</code> dashboard component is loaded correctly. In this component I have link to the quarantee:</p>
  <pre><code>  &lt;li class=&quot;nav-item&quot; [routerLinkActive]=&quot;['link-active']&quot;&gt;
        &lt;a [routerLink]=&quot;['guarantee']&quot;&gt;Guarantee&lt;/a&gt;
    &lt;/li&gt;
  </code></pre>
  <p>When I click this link I get error:</p>
  <pre><code>ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'guarantee'
  Error: Cannot match any routes. URL Segment: 'guarantee'
      at ApplyRedirects.noMatchError (router.js:4295)
      at CatchSubscriber.selector (router.js:4259)
      at CatchSubscriber.error (catchError.js:27)
      at MapSubscriber._error (Subscriber.js:75)
      at MapSubscriber.error (Subscriber.js:55)
      at MapSubscriber._error (Subscriber.js:75)
      at MapSubscriber.error (Subscriber.js:55)
      at MapSubscriber._error (Subscriber.js:75)
      at MapSubscriber.error (Subscriber.js:55)
      at ThrowIfEmptySubscriber._error (Subscriber.js:75)
      at resolvePromise (zone-evergreen.js:797)
      at resolvePromise (zone-evergreen.js:754)
      at zone-evergreen.js:858
      at ZoneDelegate.invokeTask (zone-evergreen.js:391)
      at Object.onInvokeTask (core.js:39680)
      at ZoneDelegate.invokeTask (zone-evergreen.js:390)
      at Zone.runTask (zone-evergreen.js:168)
      at drainMicroTaskQueue (zone-evergreen.js:559)
      at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:469)
      at invokeTask (zone-evergreen.js:1603)
  defaultErrorLogger @ core.js:6014
  handleError @ core.js:6066
  next @ core.js:40558
  schedulerFn @ core.js:35336
  __tryOrUnsub @ Subscriber.js:183
  next @ Subscriber.js:122
  _next @ Subscriber.js:72
  next @ Subscriber.js:49
  next @ Subject.js:39
  emit @ core.js:35298
  (anonymous) @ core.js:39738
  invoke @ zone-evergreen.js:359
  run @ zone-evergreen.js:124
  runOutsideAngular @ core.js:39572
  onHandleError @ core.js:39735
  handleError @ zone-evergreen.js:363
  runGuarded @ zone-evergreen.js:137
  api.microtaskDrainDone @ zone-evergreen.js:663
  drainMicroTaskQueue @ zone-evergreen.js:566
  invokeTask @ zone-evergreen.js:469
  invokeTask @ zone-evergreen.js:1603
  globalZoneAwareCallback @ zone-evergreen.js:1629
  </code></pre>
  <p>I need to have website dashboard on full screen and the children components with menu. I read in the Internet that I have to use route children</p>
  <hr />
  <p>I changed routerLink to this value:</p>
  <pre><code>&lt;a [routerLink]=&quot;['/app-main/guarantee']&quot;&gt;Guarantee&lt;/a&gt;
  </code></pre>
  <p>and the same error:</p>
  <pre><code>ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'app-main/guarantee'
  Error: Cannot match any routes. URL Segment: 'app-main/guarantee'
  </code></pre>