title: Angular router links do not work until app is reloaded with browser's refresh button
body: <p>In my Angular(v7) application, clicking on a router link does not load the relevant component although the URL is changed in the browsers address bar.</p>
  
  <p>Once the page is reloaded clicking on the refresh button of the browser then the router links start to work as expected. I have confirmed the behaviour in both Google Chrome and IE.</p>
  
  <p>Could you please show me what I'm doing wrong and where? I have shared the relevant parts of my code below. </p>
  
  <p><strong>App module &amp; router setup</strong></p>
  
  <pre><code>import {
    RouterModule,
    Routes
  } from "@angular/router";
  ...
  
  const appRoutes: Routes = [{
      path: 'login',
      component: LoginComponent
    },
    {
      path: 'bookings', 
      component: BookingsComponent, 
      canActivate: [AuthGuard]}, 
    {
      path: 'rates', 
      component: RatesComponent, 
      canActivate: [AuthGuard]},
    {
      path: '',
      redirectTo: '/bookings',
      pathMatch: 'full',
      canActivate: [AuthGuard]
    },
    {
      path: '**',
      component: PageNotFoundComponent
    },
  ];
  
  @NgModule({
    imports: [
      RouterModule.forRoot(appRoutes, {
        enableTracing: false
      }),
      BrowserModule,
      ...
    ]
  })
  export class AppModule {}
  </code></pre>
  
  <p><strong>Router Links in HTML template</strong></p>
  
  <pre><code>&lt;a class="side-nav-link" routerLink="/rates" routerLinkActive="active"&gt;Rates&lt;/a&gt;
  &lt;a class="side-nav-link" routerLink="/bookings" routerLinkActive="active"&gt;Bookings&lt;/a&gt;
  </code></pre>
  
  <p><strong>Auth Guard, If it is relevant</strong></p>
  
  <pre><code>@Injectable({
    providedIn: "root"
  })
  export class AuthGuard implements CanActivate {
  
    constructor(private router: Router, private authService:AuthService) { }
  
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable&lt;boolean&gt; | Promise&lt;boolean&gt; | boolean {
  
      if (this.authService.loggedIn) {
        return true;
      }
  
      this.router.navigate( ['/login'], { queryParams: { returnUrl: state.url }});
      return false;
    }
  }
  </code></pre>