iOS Safari/Chrome: Angular Router sometimes does not navigate (URL updates but view not rendered)

[NKGiao]

Which @angular/* package(s) are the source of the bug?

router

Is this a regression?

Yes

Description

On iOS devices (tested iOS 15 → iOS 18, Safari and Chrome), Angular Router navigation is unreliable:

Sometimes when tapping a link (routerLink or router.navigateByUrl), the URL in the address bar updates.

However, the component is not rendered — the view stays on the previous page.

I have to tap multiple times before the navigation works.

On Android and desktop browsers, the issue does not occur.

This happens both in local dev (ng serve) and in production builds.

"@angular/animations": "20.0.6",
"@angular/common": "20.0.6",
"@angular/compiler": "20.0.6",
"@angular/core": "20.0.6",
"@angular/forms": "20.0.6",
"@angular/platform-browser": "20.0.6",
"@angular/platform-server": "20.0.6",
"@angular/router": "20.0.6",
"@angular/ssr": "20.0.6",

Please provide a link to a minimal reproduction of the bug

Angular version: 20.x Reproduction: Create a new Angular project with Router. Add two simple routes (/page1, /page2) with routerLink between them. Open on a real iOS device in Safari or Chrome. Navigate back and forth multiple times. Occasionally, the URL changes but Angular does not render the new route.

Please provide the exception or error you saw

Angular should always render the correct component when the URL changes, regardless of iOS Safari/Chrome.

Please provide the environment you discovered this bug in (run ng version)

Angular: 20.x

@angular/router: 20.0.6

Zone-less change detection: yes (provideZonelessChangeDetection())

Hydration: tested with and without provideClientHydration() → same result

InMemoryScrolling: tested with and without withInMemoryScrolling() → same result

Tested on:

iOS 15, 16, 17, 18 (real devices) Safari + Chrome → ❌ bug

Android Chrome → ✅ works

Desktop Chrome/Edge → ✅ works

Anything else?

No response

[MeAkib]

Could you share the code? Even better if you can upload it online and provide a reproduction link.

[atscott]

I'm sorry but we can't reproduce the problem you are reporting. We require that reported issues have a minimal reproduction that showcases the problem.

If the problem still exists in your application, please open a new issue and follow the instructions in the issue template that include info on how to create a reproduction using our template.

I find it exceedingly unlikely that all zoneless Angular apps have broken routing. Despite that, I gave this the benefit of the doubt and attempted a reproduction with the minimal steps provided (https://github.com/atscott/v20-router and deployed to https://v20-router.web.app/) but was not able to reproduce the issue.