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.

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

Lazy loaded module in named outlet throws error #12842

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

@CalvinDale CalvinDale commented Dec 1, 2016

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 pleerock commented Jan 6, 2017

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

@UnwrittenFun
Copy link

@UnwrittenFun UnwrittenFun commented Jan 6, 2017

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

@Gromov-Roman Gromov-Roman commented Mar 21, 2017

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

@kenese
Copy link

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

@martzcodes
Copy link

@martzcodes martzcodes commented Apr 4, 2017

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

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 hajjem-ayoub mentioned this issue May 16, 2017
1 of 3 tasks complete
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

@aherrick aherrick commented May 19, 2017

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

@jotatoledo jotatoledo commented Jun 27, 2017

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

@hajjem-ayoub hajjem-ayoub commented Jun 28, 2017

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 rsach commented Jun 29, 2017

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

@karsunke
Copy link

@karsunke karsunke commented Jul 6, 2017

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

jasonaden added 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 added 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

@wosevision wosevision commented Jul 24, 2017

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

@mchavaillaz mchavaillaz commented Jul 30, 2017

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

@raj2033 raj2033 commented Aug 19, 2020

@DenysVuika Tried, didn't work for me.

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

@raj2033
Copy link

@raj2033 raj2033 commented Aug 19, 2020

@mhevery mhevery closed this in 7ad3264 Aug 19, 2020
@atscott
Copy link
Contributor

@atscott atscott commented Aug 20, 2020

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

@destus90 destus90 commented Aug 20, 2020

The happiness was very close.

@lincolnthree
Copy link
Contributor

@lincolnthree 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 added 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 added 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

@cherryland cherryland commented Sep 1, 2020

@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

@delego-wlritchi delego-wlritchi commented Sep 1, 2020

@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 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 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 acohenOT commented Sep 5, 2020

Yes, will do.

profanis added 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 in 926ffcd Sep 8, 2020
@angular-automatic-lock-bot
Copy link

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

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.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.