Lazy loaded module in named outlet throws error

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

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'
      }
    ]
  }

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

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

@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

@vsavkin

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.

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

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

@vsavkin

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

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

The happiness was very close.

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!

fix(router): support lazy loading for empty path named outlets (angul…

@atscott

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

@atscott

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

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

@atscott

@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

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

Yes, will do.

fix(router): support lazy loading for empty path named outlets (angul…

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

Navigation Menu

Repository navigation

Lazy loaded module in named outlet throws error #12842

63 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Lazy loaded module in named outlet throws error #12842

Description

Activity

CalvinDale commented on Dec 1, 2016

pleerock commented on Jan 6, 2017

jamesbirtles commented on Jan 6, 2017

pleerock commented on Jan 6, 2017

RatkoR commented on Jan 22, 2017

Gromov-Roman commented on Mar 21, 2017

kenese commented on Mar 26, 2017

martzmakes commented on Apr 4, 2017

aniruddhadas9 commented on Apr 13, 2017

63 remaining items

destus90 commented on Aug 20, 2020

lincolnthree commented on Aug 29, 2020

cherryland commented on Sep 1, 2020

delego-wlritchi commented on Sep 1, 2020

acohenOT commented on Sep 4, 2020

atscott commented on Sep 5, 2020

acohenOT commented on Sep 5, 2020

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

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions