Skip to content

After upgrading router to 7.2.1 navigation doesn't work with named router outlets and skipLocationChange #28200

Description

@kamilchlebek

🐞 bug report

Affected Package

The issue is caused by package @angular/router

Is this a regression?

Yes, the previous version in which this bug was not present was: 7.2.0

Description

Looks like navigation using named outlets and skipLocationChange is not working correctly. After first navigation to named outlet further navigation is ignored. Below you can find description of my case and very simple reproduction at stackblitz.

After upgrading @angular/router to 7.2.1 my async modals stopped working (it works only when opening modal for the first time). Let's start with short intro how I've implemented async modals. To achieve that functionality I've created modal component in application root, that contains <router-outlet name="modal"></router-outlet>. Then I've created lazy modules to load modal content lazily. When I want to open a modal I just navigate to desired path using:
this._router.navigate([{ outlets: { modal: route } }], { skipLocationChange: true }). Note: navigation should not update neither url nor edit url history.

Possible cause

I've debugged changes provided with PR: 6ae7aee I think the issue is caused by this line:
const urlTransition = !this.navigated || t.extractedUrl.toString() !== this.browserUrlTree.toString();

in 7.2.0 it used to be const urlTransition = !this.navigated || t.extractedUrl.toString() !== this.currentUrlTree.toString();

It makes urlTransition to equal false instead of true due to fact that:
this.browserUrlTree.toString() returns something like: /agenda/.../agenda-1w/
but in 7.2.0 it used to be: /agenda/.../agenda-1w(modal:modal/notes/list)

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-issue-repro2-fvtt8l

🌍 Your Environment

Angular Version:


Angular CLI: 7.2.1
Node: 10.13.0
OS: linux x64
Angular: 7.2.1
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.12.1
@angular-devkit/build-angular     0.12.1
@angular-devkit/build-optimizer   0.12.1
@angular-devkit/build-webpack     0.12.1
@angular-devkit/core              7.2.1
@angular-devkit/schematics        7.2.1
@angular/pwa                      0.12.2
@ngtools/webpack                  7.2.1
@schematics/angular               7.2.1
@schematics/update                0.12.1
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.23.1

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: routerregressionIndicates than the issue relates to something that worked in a previous version

    Type

    No type

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions