Skip to content

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

Closed

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

  1. added
    regressionIndicates than the issue relates to something that worked in a previous version
    on Jan 17, 2019
  2. added this to the needsTriage milestone on Jan 17, 2019
  3. added 2 commits that reference this issue on Jan 22, 2019
    85bde6d
    b95ca1a
  4. added a commit that references this issue on Jan 22, 2019
    32737a6
  5. jasonaden commented on Jan 23, 2019

    @jasonaden
    Contributor

    @kamilchlebek Thanks for documenting this issue. It's been fixed and released with the 7.2.2 release yesterday.

  6. kamilchlebek commented on Jan 23, 2019

    @kamilchlebek
    Author

    Thanks, everything is working after upgrading to 7.2.2.

  7. added a commit that references this issue on Jan 31, 2019
    40328a1
  8. angular-automatic-lock-bot commented on Sep 14, 2019

    @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.

  9. locked and limited conversation to collaborators on Sep 14, 2019
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