Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

deepest outlet path as string with nested outlets path is parsed as multiple child routes #18928

Closed
Serrulien opened this issue Aug 29, 2017 · 4 comments
Closed

deepest outlet path as string with nested outlets path is parsed as multiple child routes #18928

Serrulien opened this issue Aug 29, 2017 · 4 comments
Labels
area: router freq1: low P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent router: aux routes router: URL parsing/generation state: confirmed type: bug/fix
Milestone
Backlog

Comments

@Serrulien
Copy link

Serrulien commented Aug 29, 2017 •
edited

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[X] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

const routes: Routes = [
  {
    path: 'primary-app',
    component: NestedPrimaryComponent, // contains 1 primary router-outlet (RO) and 1 named RO 'primary-nested' 
    children: [
      {
        path: 'primary-nested',
        component: AnotherComponent
      },
      {
        path: 'primary-nested',
        component: AnotherComponent,
        outlet: 'primary-nested'
      }  
    ]
  },
  {
    path: 'aux-app',
    outlet: 'aux-app',
    component: NestedAuxComponent, // contains 1 primary RO and 1 named RO 'aux-nested'
    children: [
      {
        path: 'primary-nested',
        component: AnotherComponent
      },
      {
        path: 'aux-nested',
        component: AnotherComponent,
        outlet: 'aux-nested'
      }  
    ]
  }
];

From AppComponent's template:

  • <a [routerLink]="['/', { outlets: { 'primary': ['primary-app', { outlets: {'primary': 'primary-nested' } } ] } } ]"> navigates to /primary-app/(p/r/i/m/a/r/y/-/n/e/s/t/e/d).

  • <a [routerLink]="['/', { outlets: { 'primary': ['primary-app', { outlets: {'primary': ['primary-nested'] } } ] } } ]"> navigates to /primary-app/primary-nested.

(3 examples in the plunk, and not only with 'primary' outlets)

Expected behavior

Both routerLink directives' command should reach /primary-app/primary-nested.

Minimal reproduction of the problem with instructions

http://plnkr.co/edit/o0DFop?p=preview

This plunker illustrates this issue with 4 routes (primary RO under aux RO, primary under primary, aux under primary and aux under aux).

In the Navigations below are absolute section, you may reproduce that by clicking on the <a> tags highlighted by ☝️ emoji.

What is the motivation / use case for changing the behavior?

The behavior should be the same with and without nested outlets in path as
[routerLink]="['/', { outlets: { 'primary': 'primary-app' } } ]" doesn't routes to /p/r/i/m/a/r/y/-/a/p/p/:

Environment


Angular version: 4.3.6


Browser:
- [X] Chrome (desktop) version 60.0.3112.113
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [X] Firefox version 55.0.3
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
@ngbot ngbot bot added this to the needsTriage milestone Feb 26, 2018
@ngbot ngbot bot modified the milestones: needsTriage, Backlog May 15, 2018
@Hypenate
Copy link

The Plunker example isn't working.
I have come across the same issue on Stackoverflow.

@avangel
Copy link

avangel commented Jan 21, 2020

Same issue here. To highlight the workaround provided in the issue description, the simple solution is to enclose the deepest outlet values into square brackets [].

As a side note, the official documentation example is enclosing values into square brackets:
<a [routerLink]="[{ outlets: { popup: ['compose'] } }]">Contact</a>
From https://angular.io/guide/router#add-a-secondary-route

@avangel
Copy link

avangel commented Jan 21, 2020

In the end, I'm not even sure this should be considered a bug: each named outlet destination is a set of commands as well, as for the main navigation API. This seems recursively consistent and allows "outlet branches" at any level in the hierarchy.

@jelbourn jelbourn added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed severity3: broken labels Oct 1, 2020
@atscott atscott mentioned this issue Nov 3, 2020
Closed
atscott added a commit to atscott/angular that referenced this issue Nov 18, 2020
@atscott
fix(router): correctly handle string command in outlets
7a6f789 
There are many places where examples use just a string for the command
in outlets. When using nested outlets, we do not correctly handle
this case, as the types and algorithm always expect an array.
This PR updates the `createUrlTree` algorithm to account for the
possibility of a string literal as the command for an outlet.

Fixes angular#18928
atscott added a commit to atscott/angular that referenced this issue Nov 18, 2020
@atscott
fix(router): correctly handle string command in outlets
93130ec 
There are many places where examples use just a string for the command
in outlets. When using nested outlets, we do not correctly handle
this case, as the types and algorithm always expect an array.
This PR updates the `createUrlTree` algorithm to account for the
possibility of a string literal as the command for an outlet.

Fixes angular#18928
@atscott atscott mentioned this issue Nov 18, 2020
Closed
AndrewKushnir pushed a commit that referenced this issue Nov 20, 2020
@atscott @AndrewKushnir
fix(router): correctly handle string command in outlets (#39728)
50c19a2 
There are many places where examples use just a string for the command
in outlets. When using nested outlets, we do not correctly handle
this case, as the types and algorithm always expect an array.
This PR updates the `createUrlTree` algorithm to account for the
possibility of a string literal as the command for an outlet.

Fixes #18928

PR Close #39728
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Dec 21, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area: router freq1: low P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent router: aux routes router: URL parsing/generation state: confirmed type: bug/fix
Projects
None yet
Milestone
Backlog
Development

Successfully merging a pull request may close this issue.

fix(router): correctly handle string command in outlets atscott/angular
7 participants
@IgorMinar @atscott @jasonaden @jelbourn @avangel @Hypenate @Serrulien