routerLink directive does not respect `event.preventDefault()` to prevent navigation

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Attempting to prevent navigation for an anchor with a routerLink by calling event.preventDefault() on the click event has no effect.

Expected behavior

When event.preventDefault() is called on the click event, navigation should be prevented.

Minimal reproduction of the problem with instructions

Link to Repro

Clicking on “catalog” still navigates to the catalog view, event though the <a> tag contains (click)="$event.preventDefault()

What is the motivation / use case for changing the behavior?

Environment

Angular version: 5.2.0

[hansih91]

i updated from 5.0.2 to 5.3.2 and now its working: (click)="partcipate();$event.preventDefault();$event.stopPropagation()"

[djmarquette]

We have a need to allow an HTML page to open a routerLink in a new tab via right-click context menu. However, when user clicks in a normal case we have a component click event that builds an object and passes it up a couple parent levels to open in a side-panel. I am trying to intercept the default behavior of the routerLink using preventDefault() in an ‘anchor-tag-directive’ we rolled but am not having success. Currently the link still opens in the current page, the default behavior for the routerLink tag.

I hope this helps explain why one might want to have a preventDefault() for a routerLink on a clickable element.