title: Angular: 7.2.14 - Yet Another Router Link Not Working Topic
body: <p>Sorry to revive a question. Im using Angular 7 and Im trying to use Router Link.</p>
  
  <p>This is my app-routing-module</p>
  
  <pre><code>const routes: Routes = [
    { path: 'locations'           , component : LocationManagerComponent },
    { path: 'locations/create'    , component : CreateEditLocationComponent },
    { path: 'locations/create/:id', component : CreateEditLocationComponent },
  
    { path: '404'                 , component : PageNotFoundComponent},
    { path: '**'                  , redirectTo: '/404'}
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>This is router link:</p>
  
  <pre><code>&lt;a [routerLink] = "['/locations']" routerLinkActive="active"&gt;  test link &lt;/a&gt;
  </code></pre>
  
  <p>When I click on link, nothing happens. The URL on browser changed but component is not loaded.
  If I press F5, component is loaded and from that point on, routers link works.</p>
  
  <p>I've tryed a lot of stackoverflow solution like writing link in any sort of variant like </p>
  
  <pre><code>&lt;a routerLink="/locations" ...
  &lt;a [routerLink]= ['/locations'] ...
  &lt;a [routerLink]= "['/locations']" ...
  </code></pre>
  
  <p>With or without LinkAttive attribute. Putting</p>
  
  <pre><code>&lt;base href="/"&gt;
  </code></pre>
  
  <p>in index.html etc....</p>
  
  <p>Following this topic: <a href="https://stackoverflow.com/questions/51859992/routerlink-not-working-in-angular-6/51862253">TOPIC</a> I've tried to include Router in my Layout component:</p>
  
  <pre><code>import { Component, OnInit }  from '@angular/core';
  import { ActivatedRoute }     from '@angular/router';
  
  @Component({
    selector: 'app-layout',
    templateUrl: './layout.component.html',
    styleUrls: ['./layout.component.css']
  })
  export class LayoutComponent implements OnInit {
    constructor(
      private route           : ActivatedRoute
    ) { }
  [...]
  </code></pre>
  
  <p>but nothing changes.</p>
  
  <p>The strange part is that after an F5, all routes works, even route to component not yet loaded.</p>
  
  <p>In this topic <a href="https://stackoverflow.com/questions/50874788/routerlink-is-not-working-in-angular-6">TOPIC 2</a> the user resolved removing css class. I've tried to put my link in a completely cleaned component HTML and it not working (but still works after a refresh).</p>
  
  <pre><code>&lt;p&gt;
    dashboard works!
    &lt;a routerLink = '/locations' routerLinkActive="active"&gt;  test link &lt;/a&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>UPDATE: This is layout.component where route tag is.
  I can't figure out how to have a Sidenav without having route-outlet inside it.</p>
  
  <pre><code>&lt;mat-sidenav-container fullscreen&gt;
  
    &lt;mat-sidenav #sidenav mode="over"&gt;
      &lt;div class="profile_container"&gt;
          &lt;span&gt; User Name &lt;/span&gt;
      &lt;/div&gt;
      &lt;mat-nav-list&gt;
        &lt;mat-list-item&gt;&lt;a [routerLink]="['/locations']" routerLinkActive="active"&gt; Locations
      &lt;/mat-nav-list&gt;
    &lt;/mat-sidenav&gt;
      &lt;mat-sidenav-content&gt;
      &lt;app-header  (toggleSidenav)="sidenav.toggle()"&gt;&lt;/app-header&gt;
      &lt;div style="padding: 20px 10px 10px 20px;"&gt;
        &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;/div&gt;
    &lt;/mat-sidenav-content&gt;
  &lt;/mat-sidenav-container&gt;
  </code></pre>