Andrew Scott c5d0bd4966 fix(router): Prevent URL flicker when new navigations cancel ongoing ones (#43496)
This bit of code is problematic for several reasons:
1. AngularJS-specific handling should not exist in core router code if it can be avoided.
It's not something that should complicated the code long-term
2. It causes URL flickering (the `replace: /` really does happen and can be observed)
3. The original intent was likely for the URL to not actually change;
since the Router only initially supported 'deferred' navigations, this would _usually_ be the case.
4. It actually causes observers of URL changes more problems in handling changes
because the router is already about to process another navigation request.
Notice that when using `'computed'` restoration logic, we do not reset the URL
because it would cause another location change event and conflict with the new navigation.
5. It only resets the browser URL but does nothing to sync the rest of the internal state of the router.
6. It makes guards which call `router.navigate()` behave _slightly_ differently
than guard which return `UrlTree`. Guards which return `UrlTree` do not reset the
URL, but instead just trigger a new navigation.
7. It resets the entire URL rather than just the portion that the
   `UrlHandlingStrategy` is configured to handle. Theoretically, the
   Router could be configured to only handle a part of the URL so failed
   navigations should not reset parts it is not configured to touch.
   Note that this is actually a problem in other places in the router as
   well where `resetState` is not called before
   `resetUrlToCurrentUrlTree`.

As a nice benefit, when `urlUpdateStrategy` is set to `'eager'`, this
makes #17004 possible.

BREAKING CHANGE:
The router will no longer replace the browser URL when a new navigation
cancels an ongoing navigation. This often causes URL flicker and was
only in place to support some AngularJS hybrid applications. Hybrid
applications which rely on the `navigationId` being present on initial
navigations that were handled by the Angular router should instead
subscribe to `NavigationCancel` events and perform the
`location.replaceState` themselves to add `navigationId` to the Router
state.
In addition, tests which assert `urlChanges` on the `SpyLocation` may
need to be adjusted to account for the `replaceState` which is no longer
triggered.

PR Close #43496
2021-09-20 20:57:57 +00:00
2021-09-20 17:09:50 +00:00
…
2021-04-14 09:40:17 -07:00
2021-05-03 10:04:05 -07:00

Angular - The modern web developer's platform.

angular-logo
Angular is a development platform for building mobile and desktop web applications
using Typescript/JavaScript and other languages.

www.angular.io

Contributing Guidelines · Submit an Issue · Blog

CI status   Angular on npm   Discord conversation


Documentation

Get started with Angular, learn the fundamentals and explore advanced topics on our documentation website.

Advanced

Development Setup

Prerequisites

Setting Up a Project

Install the Angular CLI globally:

npm install -g @angular/cli

Create workspace:

ng new [PROJECT NAME]

Run the application:

cd [PROJECT NAME]
ng serve

Angular is cross-platform, fast, scalable, has incredible tooling, and is loved by millions.

Quickstart

Get started in 5 minutes.

Ecosystem

angular ecosystem logos

Changelog

Learn about the latest improvements.

Upgrading

Check out our upgrade guide to find out the best way to upgrade your project.

Contributing

Contributing Guidelines

Read through our contributing guidelines to learn about our submission process, coding rules and more.

Want to Help?

Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our guidelines for contributing and then check out one of our issues labeled as help wanted or good first issue.

Code of Conduct

Help us keep Angular open and inclusive. Please read and follow our Code of Conduct.

Community

Join the conversation and help the community.

Love Angular badge

Love Angular? Give our repo a star ⭐ ⬆️.

S
Description
Generates Angular code and provides architectural guidance. Trigger when creating projects, components, services, or HTTP communication, or for best practices…
Readme MIT 1 GiB
Languages
TypeScript 81.7%
JavaScript 12.8%
HTML 2%
Starlark 1.8%
CSS 1%
Other 0.7%