Skip to content

Auxiliary route from a lazy loaded module #13807

Closed
@maxime1992

Description

@maxime1992

I'm submitting a ... (check one with "x")

[ x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

I do have a lazy loaded module which loads by default LazyLoadedComponent when I go to /lazy. So far, it's OK.

This component contains 2 router-outlet :

<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>

And the LazyLoadedModule has the following routes :

const routes = [
  {
      path: '',
      component: LazyLoadedComponent,
      children: [
          {
              path: '',
              component: NonAuxComponent
          },
          {
              path: '',
              component: AuxComponent,
              outlet: 'aux'
          }
      ]
  }
];

When I go to /lazy I do have the 3 components loaded as expected.
But, if I want to change the path to display the AuxComponent like that :

{
   path: 'auxpath',
   component: AuxComponent,
   outlet: 'aux'
}

And I try to go to /lazy(aux:auxpath) it's not working.

I also tried to hit that URL using the routerLink like that :

<a [routerLink]="[{ outlets: { aux: 'auxpath' } }]">Load an auxiliary route</a>

But it's not working either.

image

Is this a bug with the router ? Is it just me missing out something here?

You can check out this Plunkr to make your own tests.

Minimal reproduction of the problem with instructions
Plunkr :

  • Click on "Demo (click to lazy load the module)"
  • Once the module is loaded, click on "Load an auxiliary route"
  • The non auxiliary component is well displayed, the auxiliary component is not displayed

Please tell us about your environment:

Ubuntu 16.10
VSC
Yarn
(But as this is also happening on Plunkr, not sure it's relevant).

  • Angular version: 2.0.X

v2.4.1 (the one used on Plunkr)

  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Chrome

  • Language: [all | TypeScript X.X | ES6/7 | ES5]
    TypeScript

  • Node (for AoT issues): node --version =
    v6.8.0

Activity

DzmitryShylovich

DzmitryShylovich commented on Jan 6, 2017

@DzmitryShylovich
Contributor

Duplicate of #10981

maxime1992

maxime1992 commented on Jan 6, 2017

@maxime1992
Author

It seems that it isn't even a problem with lazy loaded modules containing aux routes.

Using loadChildren : () => ModuleName also result in error.

vicb

vicb commented on Jan 6, 2017

@vicb
Contributor

Closing as duplicate.

topaxi

topaxi commented on Jun 18, 2018

@topaxi

#10981 has been fixed but this case is still not working, I'd guess because of the empty path in the parent route.

luckylooke

luckylooke commented on Oct 12, 2018

@luckylooke

@topaxi I can confirm that it is empty path related, I have posted examples here #10981 (comment)

angular-automatic-lock-bot

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.

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

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @topaxi@vicb@luckylooke@maxime1992@DzmitryShylovich

        Issue actions

          Auxiliary route from a lazy loaded module · Issue #13807 · angular/angular