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.

Pushprajsinh Chudasama · Accepted Answer · 2019-09-12T08:02:37.493

2

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 .

edited Sep 12 '19 at 08:02

answered Sep 12 '19 at 07:19

Pushprajsinh Chudasama

7,772
4
20
43

enabled preserve log, still shows no error, i get "Navigated to http://localhost:4200/pwSetup? " when it doesn't work – Valkyrie Sep 12 '19 at 07:48
try change `` tag to ` – Pushprajsinh Chudasama Sep 12 '19 at 07:50
seems to be working fine now, that routerLink has been added to ``` – Valkyrie Sep 12 '19 at 07:59
Please upvote and accept if it helped you . @BlackJack . Refer my answer you will get the reason why it sometime won't work with `a` tag . – Pushprajsinh Chudasama Sep 12 '19 at 08:01
an href is added automatically to the tag , since according to my code, its an empty href . But it still points to the correct page to be navigated to .My question is, why does it still cause a page reload, that too only sometimes – Valkyrie Sep 12 '19 at 09:03
update: explicitly setting href="javascript:void(0);" in works perfectly too – Valkyrie Sep 12 '19 at 09:09
Wow ... Thanks buddyy ... I will update my code so that future visitors gets proper answer . – Pushprajsinh Chudasama Sep 12 '19 at 10:00

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

1 Answers1