RouterLink seems to just reload the current page most of the time

Question

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.

I am stumped, especially as to why it works randomly. Any insight at all would be helpful.

Relevant code:

app-routing.module.ts:

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 { }

pw-setup.component.html:

<div style="padding-top: 10px;padding-left:10px; ">
        <img src="./assets/img/og-favicon.png" width="50" height="50">
</div>
<div class="container-fluid outer-container" style="height:80%;min-height:550px;">

        <div class="row middle-container">
           <div class="col-s-12 container inner-container">

        <p >Lets set up your password</p>
        <form >
            <div class="form-group">
                <label for="username"  class="label1">EMAIL ADDRESS</label>
                <p>email@id.com</p>

            </div>
            <div class="form-group">
                    <label for="username"  class="label1">TEAM NAME</label>
                    <p>name of team</p>

                </div>
            <div class="form-group">
                <label for="password"  class="label1">PASSWORD</label>
                <input type="password" formControlName="password" class="form-control"  />

            </div>
            <div class="form-group">
                    <label for="password"  class="label1">CONFIRM PASSWORD</label>
                    <input type="password" formControlName="password" class="form-control"  />

            </div>
            <label class="label2"><input id="rememberme" name="rememberme" value="remember" type="checkbox" /> &nbsp;Remember me</label>
            <div class="form-group">
                <button  mat-flat-button class="blue-button">
                        <a [routerLink]="['/profile']" style="color: white; text-decoration: none;" >PROCEED</a>

                </button>


            </div>

        </form>
        <router-outlet></router-outlet>
        </div>
        </div>
        </div>

app.module.ts:

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 { }

There are also no console errors.

Answer 1

The routerLink directive applied to an a element sets an href attribute upon this element.

I guess the same exception is thrown on click but the event still bubbles up and then the default behavior is executed and the page location is changed. As this happens really fast, you don't notice the error.

Try preserving the console logs even after page relaod, the error should be there.

If error continues , try change <a> tag to <button> tag and check .