Angular 7 Routing and Navigation is not working in IE 11

Question

In my Angular application, i have implemented routing using RouterModule. I have three buttons on a page on click of that page gets navigated to another page. Everything is working fine on Chrome, Firefox, and Safari but it is not working in IE 11.

app.module.ts

...
const routes: Routes = [
  { path: 'world', component: WorldComponent },
  { path: 'india', component: IndiaComponent },
  { path:'state', component: StateComponent},
  { path: '**', component: IndiaComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
...

app.component.html

<nav>
    <button mat-raised-button class="mat-button">
      <a routerLink="/india" routerLinkActive="active">India's Dashboard</a>
    </button>
    <button mat-raised-button class="mat-button">
      <a routerLink="/state" routerLinkActive="active">Indian-State's Dashboard</a>
    </button>
    <button mat-button class="mat-button">
      <a routerLink="/world" routerLinkActive="active">World's Dashboard</a>
    </button>
  </nav>

Answer 1

This is a known issue, if the <a> tag located inside the button elements. Once we click the button in IE browser, it will trigger the button click event, instead of the <a> tag click event. So, the routing not working.

To solve this issue, you could try to use the following methods:

Method 1: Change the <button> tag to <div> tag.

  <div mat-raised-button class="mat-button">
    <a routerLink="/user" routerLinkActive="active">User Dashboard</a>
  </div>
  <div mat-raised-button class="mat-button">
    <a routerLink="/about" routerLinkActive="active">About Dashboard</a>
  </div>

Method 2: Put the <button> tag in the <a> tag.

    <a routerLink="/user" routerLinkActive="active"><button mat-raised-button class="mat-button">User Dashboard</button></a>

    <a routerLink="/about" routerLinkActive="active"> <button mat-raised-button class="mat-button">About Dashboard</button></a>

Method 3: when click the button, use Jquery to trigger the hyperlink click event.