Skip to content

Bugged named outlet with lazy-loaded module & empty parent route path  #48472

@juliancarrivick

Description

@juliancarrivick

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

router

Is this a regression?

Yes

Description

This is related to an issue that has been extensively discussed in the community for a long time and been attempted to be fixed multiple times with named outlets in lazy loaded routes/parent routes with an empty path:

I think this is slightly different behaviour than previously reported: when navigating to the named route outlet the first time the route activates successfully and everything seems happy. However if you do it again the router nests another named route in the URL instead of recognising it is already active. e.g. (from stackblitz) /shell/content -> /shell/(content//help:content) -> /shell/(/(content//help:content)//help:content) etc. Additionally, navigating to [routerLink]="[{outlets: {help: null}}]" doesn't clear the named router outlet.

There is a workaround if you make the parent of the named outlet have a non-empty path (this is the previously advertised workaround), but this is not unfortunately a satisfactory solution for me. I don't have time right now to bisect and determine when it regressed but will endeaver to do this in the next few days.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-dsermn?file=src/app/shell/shell.module.ts

Please provide the exception or error you saw

As described above.

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

(Locally I'm running this, but it is still present on 15.0.3 as evidenced by the stackblitz repo)

Angular CLI: 14.2.9
Node: 16.18.1
Package Manager: npm 8.19.2
OS: linux x64

Angular: 14.2.10
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, upgrade

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.9
@angular-devkit/build-angular   14.2.9
@angular-devkit/core            14.2.9
@angular-devkit/schematics      14.2.9
@angular/cdk                    14.2.7
@angular/cli                    14.2.9
@angular/material               14.2.7
@schematics/angular             14.2.9
rxjs                            7.5.7
typescript                      4.7.4

Anything else?

Present on at least Angular 14 & 15.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions