title: Ionic/Angular nested router-outlet: routerLinks only work once
body: <p>I'm trying to implement a simple example of nested/child routes in an Angular Ionic v5 app, using <a href="https://angular.io/guide/router#nesting-routes" rel="nofollow noreferrer">Angular's routing guide</a>. I created a project using <code>ionic start</code> and selected the <code>blank</code> template, then created two components <code>ChildAComponent</code> and <code>ChildBComponent</code>. Here's the relevant code snippet from <code>home.page.html</code>:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div id=&quot;container&quot;&gt;
    &lt;strong&gt;Ready to create an app?&lt;/strong&gt;
    &lt;p&gt;Start with Ionic &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;
        href=&quot;https://ionicframework.com/docs/components&quot;&gt;UI Components&lt;/a&gt;&lt;/p&gt;
    &lt;div id=&quot;stuff&quot;&gt;
      &lt;a routerLink=&quot;child-a&quot;&gt;Child A&lt;/a&gt;&lt;br&gt;
      &lt;a routerLink=&quot;child-b&quot;&gt;Child B&lt;/a&gt;&lt;br&gt;
      &lt;a routerLink=&quot;404&quot;&gt;404&lt;/a&gt;
    &lt;/div&gt;
    &lt;div id=&quot;thing&quot;&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I'm trying to use the <code>a</code> tags to drive what component renders in the <code>router-outlet</code>. When I first load the page (URL: <code>/home</code>) I can click one of the links and the appropriate child element renders in the outlet. <em>When this happens</em>, though, the <code>href</code>s on the <code>a</code> tags (which I'm assuming are put there by Angular based on the <code>routerLink</code>s) <em><strong>all change</strong></em> to the navigated-to URL.</p>
  <p>As such, I can't click on the other component link to render that component without reloading the page (going back to <code>/home</code>).</p>
  <p><em>Before clicking a link (URL is <code>/home</code>):</em></p>
  <p><a href="https://i.stack.imgur.com/BoajE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BoajE.png" alt="href's correct" /></a></p>
  <p><em>After clicking Child A link (URL is <code>/home/childa</code>):</em></p>
  <p><a href="https://i.stack.imgur.com/UvNpv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UvNpv.png" alt="enter image description here" /></a></p>
  <p>The Angular docs don't seem to indicate I've configured anything incorrectly, and I can't see anything glaringly different in my code compared to the routing in the <a href="https://angular.io/generated/live-examples/router/stackblitz.html" rel="nofollow noreferrer">heroes example</a>. What am I doing wrong?</p>
  <p>Here's my <code>home-routing.module.ts</code> if it helps:</p>
  <pre><code>import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  import { HomePage } from './home.page';
  import { ChildAComponent } from './childa/childa.component';
  import { ChildBComponent } from './childb/childb.component';
  
  const routes: Routes = [
    {
      path: '',
      component: HomePage,
      children: [
        {
          path: 'child-a',
          component: ChildAComponent,
        },
        {
          path: 'child-b',
          component: ChildBComponent,
        },
      ]
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
  })
  export class HomePageRoutingModule {}
  </code></pre>
  <hr />
  <p><strong>GitHub:</strong> <a href="https://github.com/zrev2220/router-link-bug" rel="nofollow noreferrer">https://github.com/zrev2220/router-link-bug</a></p>