fix(router): don't intercept downloads with the Navigation API

With the platform navigation integration, the router intercepts every
same-origin `navigate` event it can, except reloads. That includes
`<a download>` links, which then become same-document navigations: the
file is never downloaded.

Leave navigate events that have a `downloadRequest` to the browser, the
same way reloads already are.

Fixes angular#71551

Author: aminesbdev

packages/router/src/statemanager/navigation_state_manager.ts

@@ -405,7 +405,9 @@ export class NavigationStateManager extends StateManager {
     // We also do not convert reload navigation events to SPA navigations. Intercepting
     // would prevent the generally expected hard refresh. If an application wants special
     // handling for reloads, they can implement it in their own `navigate` event listener.
-    if (!event.canIntercept || event.navigationType === 'reload') {
+    // Downloads are left to the browser as well. Intercepting them would turn them into
+    // same-document navigations and the file would never be downloaded.
+    if (!event.canIntercept || event.navigationType === 'reload' || event.downloadRequest != null) {
       return;
     }
 

packages/router/test/with_platform_navigation.spec.ts

@@ -484,5 +484,30 @@ if (typeof window !== 'undefined' && 'navigation' in window && !isFirefox()) {
       await timeout(3);
       expect(routerEvents).toEqual([]);
     });
+
+    /**
+     * Cancels the next `navigate` event so the browser doesn't download the file.
+     * The listener is added after the router's own listener, so the router has already handled
+     * the event when it runs.
+     */
+    function preventNextNavigation() {
+      TestBed.inject(PlatformNavigation).addEventListener(
+        'navigate',
+        (e: NavigateEvent) => e.preventDefault(),
+        {once: true},
+      );
+    }
+
+    it(
+      'should not convert downloads to SPA navigations',
+      withBody('<a href="/file.txt" download>download</a>', async () => {
+        preventNextNavigation();
+        const routerEvents: Event[] = [];
+        router.events.subscribe((e) => routerEvents.push(e));
+        document.querySelector('a')!.click();
+        await timeout();
+        expect(routerEvents).toEqual([]);
+      }),
+    );
   });
 }