Repository navigation
Lazy load auxilary #10981 #24562
Description
I'm submitting a...
[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:
Current behavior
When i navigate to a child auxilary route within an lazy loaded route i receive the error:
Error: Cannot match any routes. URL Segment: 'aux-route-name'
Expected behavior
I would like to do the following:
lazy.module.ts
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { LazyComponent } from './lazy.component';
import { Aux1Component } from './aux1/aux1.component';
import { Aux2Component } from './aux2/aux2.component';
import { Aux3Component } from './aux3/aux3.component';
const routes = [
{
path: '',
component: LazyComponent,
children: [
{
path: 'aux1',
component: Aux1Component,
outlet: 'aux'
},
{
path: 'aux2',
component: Aux2Component,
outlet: 'aux'
},
{
path: 'aux3',
component: Aux3Component,
outlet: 'aux'
}
]
}
];
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(routes),
],
declarations: [
LazyComponent,
Aux1Component,
Aux2Component,
Aux3Component,
],
exports: [
LazyComponent,
Aux1Component,
Aux2Component,
Aux3Component,
RouterModule
]
})
export class LazyModule { }
Minimal reproduction of the problem with instructions
Failing (nameless route):
https://stackblitz.com/edit/lazy-load-auxilary-failing
Workaround:
https://stackblitz.com/edit/lazy-load-auxilary-workaround
What is the motivation / use case for changing the behavior?
Environment
Angular version: 6.0.5
Browser:
- [X] Chrome (desktop) version 67.0.3396.87
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
For Tooling issues:
- Node version: v8.11.2
- Platform: Windows 10
Others:
Activity
trotyl commentedon Jun 19, 2018
Aux lazy loading was fixed in
6.1.0-beta.1, but your demo version is below this one. Please fix your repro first.vottens commentedon Jun 19, 2018
@trotyl I've fixed the repo, it is now based on 6.1.0-beta.1, the issue stays the same. I had of course checked this beforehand. The only thing i could not update to this beta version is the @angular/compiler...
trotyl commentedon Jun 19, 2018
I changed your demo to use eager loading and it still raise the same error:
https://stackblitz.com/edit/lazy-load-auxilary-pbljur?file=app%2Fapp.module.ts
No idea how is this related to lazy loading.
vottens commentedon Jun 19, 2018
If you change lazy.component.html to:
Than the routing works.
vottens commentedon Jun 19, 2018
But now it is not lazy loaded
dee-cf commentedon Jun 19, 2018
This is exactly my problem too.
vottens commentedon Jun 19, 2018
I'm glad that i'm not the only one :)
gmfun commentedon Jun 21, 2018
Made this to reproduce the issue
https://stackblitz.com/edit/lazy-load-auxilary-wy2zci?file=app/app.module.ts
the '/' url
https://lazy-load-auxilary-wy2zci.stackblitz.io
throws an error
TypeError: Cannot read property 'routes' of undefinedBut lazy loaded route in different outlet works fine.
https://lazy-load-auxilary-wy2zci.stackblitz.io/(aux:lazy)
If I remove the lazy loaded route, the '/' url works fine.
vottens commentedon Jun 22, 2018
@jasonaden Is the description of this problem clear enough for you to get started? Otherwise I can give you more information if needed ...
mcsky commentedon Jun 27, 2018
Exactly same problem here, so I desactivate lazy loading. It's sad this is a cool feature
MauroSalvadori commentedon Jul 5, 2018
We are facing exactly the same problem already from months... still now no lucky to find a workaround if not eager loading the module. This is a "must have" feature!
adrienlamotte commentedon Jul 16, 2018
I'm facing the same problem, but I'm using a workaround.
@vottens Here is a fork of your stackblitz : https://stackblitz.com/edit/lazy-load-auxilary-1eyvfr
I just changed the lazy loaded routes to not use an empty path...
jasonaden commentedon Jul 17, 2018
@vottens Thanks. A bit more info would be great on this one. I took a quick look at the linked reproduction, but wasn't immediately clear on what the problem is and how it seems it should work.
Maybe just add some info like that and hopefully it can be a quick fix.
7 remaining items
TGC79 commentedon Jan 23, 2019
Caused by #10726 which should be reopened since the fix for it was reverted.
Issue was first reported on Angular 2.0.0-rc.5.
DaSchTour commentedon Jan 27, 2020
This is still an issue. Don't close this like #10726
atscott commentedon May 27, 2020
Based on the discussion in this thread, this appears to be a duplicate of #10726. As mentioned, the fix for that issue was reverted so I have reopened and unlocked the conversation there. Closing this one so we don't have multiple issues tracking the same bug.
angular-automatic-lock-bot commentedon Jun 27, 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.