title: RouterLink is not working properly dynamically in angular 6
body: <p>dashboard.html</p>
  
  <pre><code>&lt;ul class="nav flex-column"&gt;
    &lt;li class="nav-item"&gt;
      &lt;a class="nav-link" routerLink='/dashboard'&gt;Dashboard&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="nav-item" *ngFor="let cat of categories; let i = index"&gt;
      &lt;a class="nav-link" [routerLink]="cat.categories"&gt;
        &lt;i class="fa fa-{{cat.Icon}}" aria-hidden="true"&gt;&lt;/i&gt;
        &amp;nbsp;{{cat.categories}}
      &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I am generating a list dynamic, it is just like</p>
  
  <pre><code>&lt;li&gt;Page1&lt;/li&gt;
  &lt;li&gt;Page2&lt;/li&gt;
  &lt;li&gt;Page3&lt;/li&gt;
  &lt;li&gt;Page4&lt;/li&gt;
  </code></pre>
  
  <p>and my current route is "<a href="http://localhost:4200/dashboard" rel="nofollow noreferrer">http://localhost:4200/dashboard</a>".
  Now i want to route when i click on  </p>
  
  <pre><code>&lt;a class="nav-link" [routerLink]="cat.categories"&gt;
    &lt;i class="fa fa-{{cat.Icon}}" aria-hidden="true"&gt;&lt;/i&gt;&amp;nbsp; 
    {{cat.categories}}
  &lt;/a&gt;
  </code></pre>
  
  <p>the desired route is "<a href="http://localhost:4200/dashboard/page1" rel="nofollow noreferrer">http://localhost:4200/dashboard/page1</a>". It works fine when I click the first time, but when I click on another link it gives me the error</p>
  
  <blockquote>
    <p>core.js:1673 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'dashboard/page1/page2'.</p>
  </blockquote>
  
  <p><strong>app-routing.module.ts</strong></p>
  
  <pre><code>{ path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
  { path: 'dashboard/:name', component: DashboardComponent, canActivate: [AuthGuard] }
  </code></pre>