title: RouterLink seems to just reload the current page most of the time
body: <p>I have added page navigation in my webapp using routerlinks and for some reason the page just reloads most of the time , and at the other times it works fine, very randomly.</p>
  
  <p>I am stumped, especially as to why it works randomly. Any insight at all would be helpful.</p>
  
  <p>Relevant code:</p>
  
  <p>app-routing.module.ts:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  import { ProfileComponent } from './views/profile/profile.component';
  import { PwSetupComponent } from './views/pw-setup/pw-setup.component';
  import { ChangePwComponent } from './views/change-pw/change-pw.component';
  import { EditProfileComponent } from './views/edit-profile/edit-profile.component';
  
  
  const routes: Routes = [
    {path: '',   redirectTo: 'pwSetup', pathMatch: 'full'},
    {path: 'pwSetup', component: PwSetupComponent},
    {path: 'profile', component: ProfileComponent},
    {path: 'changePw', component: ChangePwComponent},
    {path: 'editProfile', component: EditProfileComponent}
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>pw-setup.component.html:</p>
  
  <pre><code>&lt;div style="padding-top: 10px;padding-left:10px; "&gt;
          &lt;img src="./assets/img/og-favicon.png" width="50" height="50"&gt;
  &lt;/div&gt;
  &lt;div class="container-fluid outer-container" style="height:80%;min-height:550px;"&gt;
  
          &lt;div class="row middle-container"&gt;
             &lt;div class="col-s-12 container inner-container"&gt;
  
          &lt;p &gt;Lets set up your password&lt;/p&gt;
          &lt;form &gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="username"  class="label1"&gt;EMAIL ADDRESS&lt;/label&gt;
                  &lt;p&gt;email@id.com&lt;/p&gt;
  
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                      &lt;label for="username"  class="label1"&gt;TEAM NAME&lt;/label&gt;
                      &lt;p&gt;name of team&lt;/p&gt;
  
                  &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label for="password"  class="label1"&gt;PASSWORD&lt;/label&gt;
                  &lt;input type="password" formControlName="password" class="form-control"  /&gt;
  
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                      &lt;label for="password"  class="label1"&gt;CONFIRM PASSWORD&lt;/label&gt;
                      &lt;input type="password" formControlName="password" class="form-control"  /&gt;
  
              &lt;/div&gt;
              &lt;label class="label2"&gt;&lt;input id="rememberme" name="rememberme" value="remember" type="checkbox" /&gt; &amp;nbsp;Remember me&lt;/label&gt;
              &lt;div class="form-group"&gt;
                  &lt;button  mat-flat-button class="blue-button"&gt;
                          &lt;a [routerLink]="['/profile']" style="color: white; text-decoration: none;" &gt;PROCEED&lt;/a&gt;
  
                  &lt;/button&gt;
  
  
              &lt;/div&gt;
  
          &lt;/form&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>app.module.ts:</p>
  
  <pre><code>
  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { MatButtonModule, MatNativeDateModule, MatIconModule, MatSidenavModule, MatListModule, MatToolbarModule} from '@angular/material';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { SideNavComponent } from './components/side-nav/side-nav.component';
  import { AvatarModule } from 'ngx-avatar';
  import { HttpClientModule } from '@angular/common/http';
  import { MatTableModule } from '@angular/material/table';
  import { RightNavComponent } from './components/right-nav/right-nav.component';
  import { HighchartsChartComponent } from 'highcharts-angular';
  import { ProfileComponent } from './views/profile/profile.component';
  import { PwSetupComponent } from './views/pw-setup/pw-setup.component';
  import { ChangePwComponent } from './views/change-pw/change-pw.component';
  import { EditProfileComponent } from './views/edit-profile/edit-profile.component';
  
  
  @NgModule({
    declarations: [
      AppComponent,
      SideNavComponent,
      RightNavComponent,
      HighchartsChartComponent,
      ProfileComponent,
      PwSetupComponent,
      ChangePwComponent,
      EditProfileComponent
  
    ],
    imports: [
      BrowserModule,
      BrowserAnimationsModule,
      AppRoutingModule,
      MatButtonModule,
      MatNativeDateModule,
      MatIconModule,
      MatSidenavModule,
      MatListModule,
      MatToolbarModule,
      AvatarModule,
      HttpClientModule,
      MatTableModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  
  </code></pre>
  
  <p>There are also no console errors.</p>