fix(router): If users are using the Alt key when clicking the router links, prioritize browser’s default behavior

[yuheiy]

When users click a link while holding the Alt key together, the browsers behave as follows.

Windows 10:

Browser	Behavior
Chrome 84	Download the target resource
Firefox 79	Prevent navigation and therefore do nothing
Edge 84	Download the target resource
IE 11	No impact

macOS Catalina:

Browser	Behavior
Chrome 84	Download the target resource
Firefox 79	Prevent navigation and therefore do nothing
Safari 13	Download the target resource

The Alt key has no impact on IE, but on most other browsers it does. As with other modifier keys, the router should stop the original navigation to avoid preventing the browser’s default behavior.

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/angular/angular/blob/master/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• angular.io application / infrastructure changes
• Other... Please describe:

Does this PR introduce a breaking change?

• Yes
• No

This doesn't have an associate test for a few reasons:

• No tests exist for the meta keys already, so adding one for this would take more effort
• The test, if it were to be a unit test, wouldn't provide much value because it would have to pass in true specifically for the meta key and simply expect true back. This is akin to a change detector test
• The ideal test would be a protractor test that verifies the behavior as described above -- i.e. that the Angular router does not trigger a navigation by clicking the routerLink, but instead the browser handles the click natively. This may be a little overkill to write for this simple change.

[atscott]

Thanks @yuheiy, this is a really great summary of the behavior in each browser! Would you mind copying that summary in the PR description into the commit message? We try to make all the information immediately available there rather than having to try to find the associated PR after merging.

Can you also run yarn bazel run //packages/router:router_api.accept and add the new golden to the commit so the CI test passes?

[yuheiy]

I’ve updated the commit message and added the golden!

[atscott]

reviewed-for: public-api
reviewed-for: fw-router

[AndrewKushnir]

Reviewed-for: public-api

[jelbourn]

@atscott @AndrewKushnir if we don't consider onClick to be public API here, could we mark it as @internal?

[atscott]

@atscott @AndrewKushnir if we don't consider onClick to be public API here, could we mark it as @internal?

Yea, we probably should mark it as internal.

[atscott]

@atscott @AndrewKushnir if we don't consider onClick to be public API here, could we mark it as @internal?

@jelbourn - I created a separate PR for this #38448

[petebacondarwin]

Reviewed-for: public-api

The addition of /** @nodoc */ in a recent commit has caused a conflict. Can you please rebase?

[yuheiy]

@petebacondarwin I rebased.

[ngbot]

I see that you just added the PR action: merge label, but the following checks are still failing:
     status "ci/circleci: test" is failing
     status "google3" is pending
     missing required status "ci/circleci: publish_snapshot"
     3 pending code reviews

If you want your PR to be merged, it has to pass all the CI checks.

If you can't get the PR to a green state due to flakes or broken master, please try rebasing to master and/or restarting the CI job. If that fails and you believe that the issue is not due to your change, please contact the caretaker and ask for help.

[petebacondarwin]

Caretaker - merge-assistance: the broken test is unrelated to this PR.

[petebacondarwin]

Sorry I was a bit to fast with the merge label. This change needs to go through presubmit against the internal Google repository.

[atscott]

presubmit

[jelbourn]

LGTM

Reviewed-for: public-api

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}