title: Angular 5 <a routerLink> press causes unwanted refresh
body: <p>When clicking on an anchor tag with a routerLink the router successfully navigates to the route but then refreshes the page. This happens on both Chrome and Edge.</p>
  
  <p>The anchor:</p>
  
  <pre><code>&lt;a mat-raised-button color="primary" style="margin-left: 10px;[routerLink]=['/table']"&gt;some text&lt;/a&gt;
  </code></pre>
  
  <p>routes.module.ts:</p>
  
  <pre><code>const appRoutes: Routes = [
    { path: "home", component: HomeComponent },
    { path: "content", component: ImageViewComponent },
    { path: "table", component: TableComponent },
    { path: "", redirectTo: "/home", pathMatch: "full" }
  ];
  
  @NgModule({
    imports: [
      RouterModule.forRoot(
        appRoutes,
        { enableTracing: false }
      )
    ],
    exports: [RouterModule]
  })
  export class AppRoutingModule {}
  </code></pre>
  
  <p>app.module.ts:</p>
  
  <pre><code>@NgModule({
    declarations: [
  
    ],
    imports: [
      BrowserModule,
      ServerModule,
      AppRoutingModule,
      FlexLayoutModule,
      MyOwnCustomMaterialModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule {}
  </code></pre>
  
  <p>Angular CLI version used: 1.7.3 
  Angular router version: 5.2.8</p>