Angular 2 named router does not work if parent component path is empty

This is my route configuration

{
    path: 'home',
    component: HomepageComponent,
    children: [
        {
            path: 'enquiry',
            component: EnquiryComponent,
            outlet: 'suboutlet'
        }
    ]
}

This works great with:

this.router.navigate(['/home', {outlets: {suboutlet: ['enquiry']}}]);

But if my parent path is empty, like this:

{
    path: '', // <-- This is blank now
    component: HomepageComponent,
    children: [
        {
            path: 'enquiry',
            component: EnquiryComponent,
            outlet: 'suboutlet'
        }
    ]
}

None of the below work:

this.router.navigate(['', {outlets: {suboutlet: ['enquiry']}}]);
this.router.navigate(['/', {outlets: {suboutlet: ['enquiry']}}]);
this.router.navigate([{outlets: {suboutlet: ['enquiry']}}]);

Error: Error: cannot match any routes. Segment URL: "request"

I need this router configuration since my nested named socket is in the Home component and I don't want its / home prefix to get this working

Any help is appreciated.


Here is the plunker for my above code that works

https://plnkr.co/edit/SZhu8LxHiSKNxX3JQ22N

And I do not know why below one does not work

https://plnkr.co/edit/jvhkN77wH6ZePErwDvT3

+4
source share

Source: https://habr.com/ru/post/1680098/


All Articles