I'm having an issue with my routing that I'd need a little help with. Originally I had all my routing in a single app.routing.ts
file. I'm currently refactoring my routes into a files to accompany their corresponding feature modules to be lazily loaded. One lazily loaded feature module utilizes a secondary aux router outlet. Here is my code....
original : app.routing.ts
const appRoutes: Routes = [
{
path: 'settings',
component: SettingsComponent,
children: [
{
path: '',
redirectTo: '/settings/(settings:user)',
pathMatch: 'full'
},
{
path: 'user',
component: SettingsUserComponent,
outlet: 'settings'
}
]
}
]
new: app.routing.ts
const appRoutes: Routes = [
...
{
path: 'settings',
loadChildren: '@app/settings/settings.module#SettingsModule'
}
...
]
settings.routing.ts
export const SETTINGS_ROUTES = [
{
path: '',
redirectTo: '/settings/(settings:user)',
pathMatch: 'full'
},
{
path: 'user',
component: SettingsUserComponent,
outlet: 'settings'
}
]
So the issue is that originally my settings
path would load the SettingsComponent
that contains the settings
outlet. The empty child path would then redirect to /settings/(settings:user)
and load the SettingsUserComponent
in the settings
aux router outlet.
Now that I've refactored, there is no SettingsComponent
being loaded so an error occurs saying that there is not a settings
outlet.
From the documentation, it states that I'm not able to use component
attribute with loadChildren
. I can't use component
with redirectTo
in the SETTINGS_ROUTES
either. I've tried wrapping my settings routes in another empty path like below but didn't seem to solve the problem.
settings.routing.ts
export const SETTINGS_ROUTES = [
{
path: '',
component: 'SettingsComponent',
children: [
{
path: '',
redirectTo: '/settings/(settings:user)',
pathMatch: 'full'
},
{
path: 'user',
component: SettingsUserComponent,
outlet: 'settings'
}
]
}
]
How do I go about loading my SettingsComponent
that contains the settings
outlet for the child routes. Any suggestions are greatly appreciated.
Thanks
Update
https://github.com/angular/angular/issues/10981#issuecomment-301787482
There is an issue for this since Aug 2016. Some have been able to create workarounds with Angular4. I've tried them but don't seem to work properly with Angular2.
If anyone has a successful workaround for Angular2, I'd appreciate if you'd post them.
See Question&Answers more detail:
os