Lazy loaded module in named outlet throws error #12842

molcik · 2016-11-13T09:34:07Z

[x] bug report
[ ] feature request
[ ] support request

Current behavior
Navigating to route with lazy loaded module in named outlet throws error:

Uncaught (in promise): TypeError: Cannot read property 'routes' of undefined

Expected behavior
Navigating to route with lazy loaded module in named outlet without errors.

Minimal reproduction of the problem with instructions
When I have configured my routes with named outlet and want to have lazy loaded module in that outlet.

export const routes: Routes = [
 {  
   path: '',
   component: AppComponent,
   children: [
     {
       path: '',
       loadChildren: "app/home/home.module#HomeModule"
     },   {
       path: '',
       loadChildren: "app/about/about.module#AboutModule",
       outlet: "about"
     }
   ]
  }
];

Here is the plnkr to demonstrate the behavior: http://plnkr.co/edit/nK9kJYdakXILZU0UKFrP?p=preview
(Anything is displayed because of error)

What is the motivation / use case for changing the behavior?
Using lazy loaded modules in named outlets.

Please tell us about your environment:

Angular version: 2.0.X

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

Node (for AoT issues): node --version =

CalvinDale · 2016-12-01T01:00:46Z

This issue also affects updating matrix-params via router.navigate(). E.g.,

  {
    path: '', component: DummyWrapperComponent, // Wrapped because a component-less route cannot have a named outlet
    outlet: 'popup', // Targetting `popup` outlet in wrapper's parent
    children: [
      {
        path: 'state-scratchpad',
        // outlet: 'popup', // Can't target non-primary outlet for lazy-loaded component
        // params: { tcomp: '', tmake: '' }, // These matrix params can be updated via router.navigate() if targeting
        //     `primary` outlet without the wrapper; but for `popup` outlet the wrapper is required
        loadChildren: 'app/state-scratchpad/state-scratchpad.module#StateScratchpadModule'
      }
    ]
  }

pleerock · 2017-01-06T05:11:33Z

have anyone find a temporary workaround for this issue? (goal is to load component in named outlets lazily).

jamesbirtles · 2017-01-06T05:45:57Z

We have this

    {
        path: 'me',
        outlet: 'hub',
        component: ProxyRouteComponent,
        children: [
            {
                path: '',
                loadChildren: 'hub#HubModule',
            },
        ],
    },

Where proxy route component is simply

import { Component } from '@angular/core';

@Component({
    selector: 'b-proxy-route',
    template: '<router-outlet></router-outlet>',
})
export class ProxyRouteComponent {
}

pleerock · 2017-01-06T08:12:54Z

@UnwrittenFun yeah it works however it brings a side effect - extra level in the component tree which can bring some problems in some use cases

RatkoR · 2017-01-22T20:36:24Z

I know It's been a while since commit 8f2fa0f, but can you @vsavkin remember why you added that "a componentless route cannot have a named outlet set" guard.

Is it because it's just not possible to lazy load in such a way (because maybe router is designed so) or is this something that will eventually be resolved sometime.

Gromov-Roman · 2017-03-21T07:28:14Z

@UnwrittenFun not work for me on angular 4 rc.5. Have any idea?

kenese · 2017-03-26T20:31:33Z

Hi there, I am also interested to know if we will be able to lazy load secondary routes in the future

martzcodes · 2017-04-04T22:11:55Z

@vsavkin @jeffbcross We ran into this in your ng-conf session

aniruddhadas9 · 2017-04-13T19:09:29Z

still facing the same issue.

http://stackoverflow.com/questions/40769797/angular2-invalid-route-configuration-of-route-outlate-name-a-componentless-ro?noredirect=1#comment73859966_40769797

a small patch to be able to lazyload a module in a named router-outlet with one restriction is to specify the lazyloaded named outlet first in the routing. angular#12842

aherrick · 2017-05-19T19:16:08Z

We are seeing this as well. We are simply trying to lazy load a module and have multiple named router outlets.

jotatoledo · 2017-06-27T12:06:11Z

Same issue here, I want to lazy load a module with a path to a named outlet. Cant figure a way to get it to work

hajjem-ayoub · 2017-06-28T11:14:21Z

Is there any information about this issue?? just so I know in my company if we should do a temporary solution until it's fixed or think about a more permanent solution. I just need an answer to a simple question:
"is this planned in the @angular/router team roadmap or not for now??"

rsach · 2017-06-29T20:57:11Z

i'm facing the similar issue , is there any work around for this?

karsunke · 2017-07-06T15:05:58Z

The workaround of @UnwrittenFun works for me in 4.2.5 (maybe in every version). Thanks alot.

a small patch to be able to lazyload a module in a named router-outlet with one restriction is to specify the lazyloaded named outlet first in the routing. angular#12842

a small patch to be able to lazyload a module in a named router-outlet with one restriction is to specify the lazyloaded named outlet first in the routing. #12842

wosevision · 2017-07-24T18:08:15Z

+1, trying to lazy-load a couple of heavier views in my sidebar. Seems a pretty reasonable use-case.. I'd be interested to hear if there's an actual technical difficulty in implementing this, because what I'm seeing here is a couple of easy workarounds and an error message that feels more like an oversight than intentional – the error that's thrown doesn't mention loadChildren and only checks whether there's a component attached to a named outlet.

a small patch to be able to lazyload a module in a named router-outlet with one restriction is to specify the lazyloaded named outlet first in the routing. angular#12842

mchavaillaz · 2017-07-30T16:44:33Z

I tried the workaround of @UnwrittenFun with the version 4.2.5 but it doesn't work.

Could somebody help me with the workaround? @karsunke ?

My test application is available in this repo --> https://github.com/mchavaillaz/angular-router-named-outlet-lazy-loaded

I have the erro message "Error: Cannot match any routes. URL Segment: 'module-one'"

In general, the router only matches and loads a single Route config tree. However, named outlets with empty paths are a special case where the router can and should actually match two different `Route`s and ensure that the modules are loaded for each match. This change updates the "ApplyRedirects" stage to ensure that named outlets with empty paths finish loading their configs before proceeding to the next stage in the routing pipe. This is necessary because if the named outlet has `loadChildren` but the associated lazy config is not loaded before following stages attempt to match and activate relevant `Route`s, an error will occur. fixes angular#12842

raj2033 · 2020-08-19T01:36:40Z

@DenysVuika Tried, didn't work for me.

RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, }),

raj2033 · 2020-08-19T01:38:27Z

I am also interested to know if we will be able to lazy load secondary routes in the future

@kenese its 3yrs down the line now. and the answer is sadly 'NO'.

atscott · 2020-08-20T04:40:02Z

Reverted in 8f24bc9. Fails internal tests.

destus90 · 2020-08-20T04:53:16Z

The happiness was very close.

lincolnthree · 2020-08-29T13:29:12Z

Omg a fix!!! Yessss! I'll be able to delete soooooo much portal code. Please don't let this PR die! It needs tenderness and nourishment!

…ar#38379) In general, the router only matches and loads a single Route config tree. However, named outlets with empty paths are a special case where the router can and should actually match two different `Route`s and ensure that the modules are loaded for each match. This change updates the "ApplyRedirects" stage to ensure that named outlets with empty paths finish loading their configs before proceeding to the next stage in the routing pipe. This is necessary because if the named outlet has `loadChildren` but the associated lazy config is not loaded before following stages attempt to match and activate relevant `Route`s, an error will occur. fixes angular#12842 PR Close angular#38379

cherryland · 2020-09-01T12:20:43Z

@atscott Reverted in 8f24bc9. Fails internal tests.

Why should this be a community problem? This is a Google problem. Point. We applied the patch manually to @angular/router and ... uhm well it just works. This the reason why Angular is the devil. This project is too dependent on Google's death star.

delego-wlritchi · 2020-09-01T14:33:46Z

@atscott Reverted in 8f24bc9. Fails internal tests.

Why should this be a community problem? This is a Google problem. Point. We applied the patch manually to @angular/router and ... uhm well it just works. This the reason why Angular is the devil. This project is too dependent on Google's death star.

If a change to Angular causes any consumer's tests to fail, then it's a backwards-incompatible change and needs to be reverted, or at the very least only included in a new major release with suitable warnings around it. In this case, Google just happens to be a high-value consumer of the library. The fact that their tests caught an issue before it made it into a release candidate is good for other consumers like us. See discussion on this topic on the PR #38379.

There's a separate argument to be made that it might be helpful to describe the cause of the test failures publicly, so that non-Google contributors could help with the fix, but that discussion is already happening on the PR and it seems like Google does intend to circle back with that information when they've identified the root cause.

In general, the router only matches and loads a single Route config tree. However, named outlets with empty paths are a special case where the router can and should actually match two different `Route`s and ensure that the modules are loaded for each match. This change updates the "ApplyRedirects" stage to ensure that named outlets with empty paths finish loading their configs before proceeding to the next stage in the routing pipe. This is necessary because if the named outlet has `loadChildren` but the associated lazy config is not loaded before following stages attempt to match and activate relevant `Route`s, an error will occur. fixes angular#12842

acohenOT · 2020-09-04T17:29:29Z

@atscott can you please explain why this fix is listed in the change log for 10.1.0 but this issue is still open and I don't think the PR was merged. Is this a mistake?

https://github.com/angular/angular/blob/master/CHANGELOG.md

"router: support lazy loading for empty path named outlets"

atscott · 2020-09-05T02:30:09Z

@atscott can you please explain why this fix is listed in the change log for 10.1.0 but this issue is still open and I don't think the PR was merged. Is this is a mistake?

https://github.com/angular/angular/blob/master/CHANGELOG.md

"router: support lazy loading for empty path named outlets"

Yes, that’s a mistake. The commit was reverted because we found an issue after it went in. I’ve since investigated the failure more and reworked the solution. I plan to merge the change next week and it’ll go into the 11.0.0-next.1 release.

Would you like to send a PR to correct the changelog?

acohenOT · 2020-09-05T02:37:31Z

Yes, will do.

…ar#38379) In general, the router only matches and loads a single Route config tree. However, named outlets with empty paths are a special case where the router can and should actually match two different `Route`s and ensure that the modules are loaded for each match. This change updates the "ApplyRedirects" stage to ensure that named outlets with empty paths finish loading their configs before proceeding to the next stage in the routing pipe. This is necessary because if the named outlet has `loadChildren` but the associated lazy config is not loaded before following stages attempt to match and activate relevant `Route`s, an error will occur. fixes angular#12842 PR Close angular#38379

angular-automatic-lock-bot · 2020-10-09T16:25:51Z

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

pkozlowski-opensource added the area: router label Nov 13, 2016

molcik mentioned this issue Nov 14, 2016

Angular2 outlet route not working! #11382

Closed

mrkosima mentioned this issue Nov 14, 2016

Router, lazy-loaded module: loading children into named outlet throws NoMatch error #11208

Closed

vsavkin added severity3: broken freq1: low type: bug/fix labels Nov 14, 2016

suchk mentioned this issue Dec 21, 2016

Secondary routes/segments don't map to browser buttons when lazy loading a module that defines routes #12226

Closed

hajjem-ayoub mentioned this issue May 16, 2017

fix(router): Named route and lazyloading #16812

Closed

3 tasks

jasonaden pushed a commit that referenced this issue Jul 14, 2017

fix(router): Named route and lazyloading

38908e3

a small patch to be able to lazyload a module in a named router-outlet with one restriction is to specify the lazyloaded named outlet first in the routing. #12842

atscott mentioned this issue Aug 7, 2020

fix(router): support lazy loading for empty path named outlets #38379

Closed

mhevery closed this as completed in 7ad3264 Aug 19, 2020

atscott reopened this Aug 20, 2020

acohenOT mentioned this issue Sep 5, 2020

docs: remove reverted bug fix from 10.1 change log #38718

Closed

12 tasks

atscott closed this as completed in 926ffcd Sep 8, 2020

atscott mentioned this issue Sep 9, 2020

Router: Cannot read property 'routes' of undefined (route._loadedConfig is undefined) #38755

Closed

angular-automatic-lock-bot bot locked and limited conversation to collaborators Oct 9, 2020

Lazy loaded module in named outlet throws error #12842

Lazy loaded module in named outlet throws error #12842

molcik commented Nov 13, 2016 •

edited by jasonaden

CalvinDale commented Dec 1, 2016

pleerock commented Jan 6, 2017

jamesbirtles commented Jan 6, 2017

pleerock commented Jan 6, 2017

RatkoR commented Jan 22, 2017

Gromov-Roman commented Mar 21, 2017

kenese commented Mar 26, 2017

martzcodes commented Apr 4, 2017

aniruddhadas9 commented Apr 13, 2017

aherrick commented May 19, 2017

jotatoledo commented Jun 27, 2017

hajjem-ayoub commented Jun 28, 2017

rsach commented Jun 29, 2017

karsunke commented Jul 6, 2017

wosevision commented Jul 24, 2017

mchavaillaz commented Jul 30, 2017

raj2033 commented Aug 19, 2020 •

edited

raj2033 commented Aug 19, 2020 •

edited

atscott commented Aug 20, 2020

destus90 commented Aug 20, 2020

lincolnthree commented Aug 29, 2020 •

edited

cherryland commented Sep 1, 2020

delego-wlritchi commented Sep 1, 2020

acohenOT commented Sep 4, 2020 •

edited

atscott commented Sep 5, 2020

acohenOT commented Sep 5, 2020

angular-automatic-lock-bot bot commented Oct 9, 2020

Lazy loaded module in named outlet throws error #12842

Lazy loaded module in named outlet throws error #12842

Comments

molcik commented Nov 13, 2016 • edited by jasonaden

CalvinDale commented Dec 1, 2016

pleerock commented Jan 6, 2017

jamesbirtles commented Jan 6, 2017

pleerock commented Jan 6, 2017

RatkoR commented Jan 22, 2017

Gromov-Roman commented Mar 21, 2017

kenese commented Mar 26, 2017

martzcodes commented Apr 4, 2017

aniruddhadas9 commented Apr 13, 2017

aherrick commented May 19, 2017

jotatoledo commented Jun 27, 2017

hajjem-ayoub commented Jun 28, 2017

rsach commented Jun 29, 2017

karsunke commented Jul 6, 2017

wosevision commented Jul 24, 2017

mchavaillaz commented Jul 30, 2017

raj2033 commented Aug 19, 2020 • edited

raj2033 commented Aug 19, 2020 • edited

atscott commented Aug 20, 2020

destus90 commented Aug 20, 2020

lincolnthree commented Aug 29, 2020 • edited

cherryland commented Sep 1, 2020

delego-wlritchi commented Sep 1, 2020

acohenOT commented Sep 4, 2020 • edited

atscott commented Sep 5, 2020

acohenOT commented Sep 5, 2020

angular-automatic-lock-bot bot commented Oct 9, 2020

molcik commented Nov 13, 2016 •

edited by jasonaden

raj2033 commented Aug 19, 2020 •

edited

raj2033 commented Aug 19, 2020 •

edited

lincolnthree commented Aug 29, 2020 •

edited

acohenOT commented Sep 4, 2020 •

edited