I have been attempting to implement an auxiliary route for a modal window, but I am encountering routing errors and unable to resolve the issue. Here is how I have approached it...
app.component.html
<router-outlet></router-outlet>
<router-outlet name="modal"></router-outlet>
admin-routing.module.ts
...
const ROUTES: Routes = [
{
path: 'admin',
component: AdminComponent,
children: [
{
path: 'accounts',
loadChildren: './accounts/accounts.module#AccountsModule'
},{...}
]
}
];
...
accounts-routing.module.ts
...
const ROUTES: Routes = [
{
path: '',
children: [
{
path: '',
component: AccountsIndexComponent
},{
path: 'new',
component: AccountsNewComponent
},{
path: ':id',
component: AccountsShowComponent
},{
path: ':id/edit',
component: AccountsEditComponent,
outlet: 'modal'
}
]
}
];
...
modal.service.ts
...
constructor(
private router:Router,
private route:ActivatedRoute
) { }
open(route:Array<any>) {
this.router.navigate(
[{outlets: {drawer: route}}], {relativeTo: this.route}
)
}
...
When I use
ModalService.open([account.id, 'edit'])/admin/accounts(modal:1/edit), which seems like the correct behavior. However, I receive an error indicating that it cannot match the 1/edit URL segment.
NavigationError(id: 2, url: '/admin/accounts(modal:1/edit)', error: Error: Cannot match any routes. URL Segment: '1/edit')
I have also attempted the following without success...
ModalService.open(['accounts', account.id, 'edit'])
ModalService.open(['admin','accounts', account.id, 'edit'])