Skip to content

Auxiliary route from a lazy loaded module #13807

Closed

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

  1. DzmitryShylovich commented on Jan 6, 2017

    @DzmitryShylovich
    Contributor

    Duplicate of #10981

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

  3. vicb commented on Jan 6, 2017

    @vicb
    Contributor

    Closing as duplicate.

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

  5. luckylooke commented on Oct 12, 2018

    @luckylooke

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

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

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

      Issue actions