Skip to content

Lazy loaded module in named outlet throws error #12842

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.

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

Closed
molcik opened this issue Nov 13, 2016 · 58 comments
Closed

Lazy loaded module in named outlet throws error #12842

molcik opened this issue Nov 13, 2016 · 58 comments

Comments

@molcik
Copy link

molcik commented Nov 13, 2016

[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

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 ]

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

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

@CalvinDale
Copy link

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
Copy link

pleerock commented Jan 6, 2017

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

@jamesbirtles
Copy link

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
Copy link

pleerock commented Jan 6, 2017

@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
Copy link

RatkoR commented Jan 22, 2017

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
Copy link

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

@kenese
Copy link

kenese commented Mar 26, 2017

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

@martzmakes
Copy link

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

hajjem-ayoub pushed a commit to hajjem-ayoub/angular that referenced this issue May 16, 2017
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
hajjem-ayoub added a commit to hajjem-ayoub/angular that referenced this issue May 16, 2017
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
hajjem-ayoub added a commit to hajjem-ayoub/angular that referenced this issue May 16, 2017
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
Copy link

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

@jotatoledo
Copy link
Contributor

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
Copy link

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
Copy link

rsach commented Jun 29, 2017

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

@karsunke
Copy link

karsunke commented Jul 6, 2017

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

jasonaden pushed a commit to jasonaden/angular that referenced this issue Jul 14, 2017
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
jasonaden pushed a commit that referenced this issue Jul 14, 2017
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
Copy link

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

mhevery pushed a commit to hajjem-ayoub/angular that referenced this issue Jul 26, 2017
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
Copy link

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'"

atscott added a commit to atscott/angular that referenced this issue Aug 7, 2020
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
atscott added a commit to atscott/angular that referenced this issue Aug 7, 2020
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
atscott added a commit to atscott/angular that referenced this issue Aug 10, 2020
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
atscott added a commit to atscott/angular that referenced this issue Aug 10, 2020
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
atscott added a commit to atscott/angular that referenced this issue Aug 17, 2020
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
atscott added a commit to atscott/angular that referenced this issue Aug 17, 2020
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
atscott added a commit to atscott/angular that referenced this issue Aug 17, 2020
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
atscott added a commit to atscott/angular that referenced this issue Aug 17, 2020
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
Copy link
Contributor

raj2033 commented Aug 19, 2020

@DenysVuika Tried, didn't work for me.

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

@raj2033
Copy link
Contributor

raj2033 commented Aug 19, 2020

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
Copy link
Contributor

atscott commented Aug 20, 2020

Reverted in 8f24bc9. Fails internal tests.

@atscott atscott reopened this Aug 20, 2020
@destus90
Copy link
Contributor

The happiness was very close.

@lincolnthree
Copy link
Contributor

lincolnthree commented Aug 29, 2020

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!

subratpalhar92 pushed a commit to SUBRATPALHAR-ALL-JAVASCRIPT/angular that referenced this issue Aug 29, 2020
…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
subratpalhar92 pushed a commit to SUBRATPALHAR-ALL-JAVASCRIPT/angular that referenced this issue Aug 31, 2020
…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
Copy link

@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
Copy link

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

atscott added a commit to atscott/angular that referenced this issue Sep 1, 2020
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
Copy link
Contributor

acohenOT commented Sep 4, 2020

@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
Copy link
Contributor

atscott commented Sep 5, 2020

@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
Copy link
Contributor

acohenOT commented Sep 5, 2020

Yes, will do.

profanis pushed a commit to profanis/angular that referenced this issue Sep 5, 2020
…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
@atscott atscott closed this as completed in 926ffcd Sep 8, 2020
@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 Oct 9, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.