I got a routing problem in Angular2.
My Problem:
See my routing code below. The first version is working correctly. The route is found and no errors are thrown when I create a routerLink to .
But, why does my first excerpt work, and second does not??? I don´t want to create a pseudo-path "test" just to get this working. On second example is get this error message.
[...]Cannot match any routes. URL Segment: 'mypath'[...]
Working Routing:
children: export const routes: Routes = [
{
path: '',
component: ParentSplitViewComponent,
children: [
{
path: '',
redirectTo: 'test'
},
{
path: 'test',
component: SplitViewComponent,
children: [
{
path: '',
redirectTo: 'list'
},
{
path: 'list',
component: MyListComponent,
outlet: 'left'
},
{
path: ':id',
component: MyDetailComponent,
outlet: 'right'
}
]
}
]
}
];
Not working Routing:
children: export const routes: Routes = [
{
path: '',
component: ParentSplitViewComponent,
children: [
{
path: '',
component: SplitViewComponent,
children: [
{
path: '',
redirectTo: 'list'
},
{
path: 'list',
component: MyListComponent,
outlet: 'left'
},
{
path: ':id',
component: MyDetailComponent,
outlet: 'right'
}
]
}
]
}
];
Please don´t rely to naming of files etc. I had to rename paths etc - everything works fine from this point of view. Its just about the routing.
App.routing.ts
{
path: 'mypath',
loadChildren: 'app/modules/myModule/my.module#MyModule'
},
Larger excerpt of lazy-loaded-module to understand the structure:
import [...]
@Component({
selector: 'parent-split-view-layout-container',
template: `
<h1>Parent</h1>
<router-outlet></router-outlet>
`
});
export class ParentSplitViewComponent {}
@Component({
selector: 'split-view-layout-container',
template: `
<h1>Vertical Split View</h1>
<div id="left">
<router-outlet name="left"></router-outlet>
</div>
<div id="right">
<router-outlet name="right"></router-outlet>
</div>
`
});
export class SplitViewComponent {}
/* Routing Definition */
export const routes: Routes = [
{
path: '',
component: ParentSplitViewComponent,
children: [
{
path: '',
redirectTo: 'test'
},
{
path: 'test',
component: SplitViewComponent,
children: [
{
path: '',
redirectTo: 'list'
},
{
path: 'list',
component: MyListComponent,
outlet: 'left'
},
{
path: ':id',
component: MyDetailComponent,
outlet: 'right'
}
]
}
]
}
];
export const MyRouting: ModuleWithProviders = RouterModule.forChild(routes);
Angular2 Versions:
"@angular/common": "~2.4.5",
"@angular/compiler": "~2.4.5",
"@angular/core": "~2.4.5",
"@angular/forms": "~2.4.5",
"@angular/http": "~2.4.5",
"@angular/material": "^2.0.0-beta.1",
"@angular/platform-browser": "~2.4.5",
"@angular/platform-browser-dynamic": "~2.4.5",
"@angular/router": "~3.4.5",
It's a known bug.
I reported that a month ago https://github.com/angular/angular/issues/13807
It was closed as it's a duplicate of : https://github.com/angular/angular/issues/10981
I needed that too, but as the issue is opened since the 26 of august 2016 and " vsavkin removed their assignment on 16 Nov 2016 ", I think we'll not see a fix anytime soon.
I ended up with something pretty bad comparing to what I could have done with an auxiliary route but the work gotta keep up. I wish I was able to make a contrib to help on that one but I'm not ...
EDIT: (13/06/18)
Looks like a fix has been merged today!
I found a workaround here thanks to some helpful folks who ran into the same issue. Your issue is likely that you are trying to use a router outlet as a child on an empty route. I was able to solve a similar issue by naming the route to a static value and making the outlet a child from there.
As others have said, you can track the issue here - https://github.com/angular/angular/issues/10981
Try changing
{
path: '',
component: SplitViewComponent,
children: [
{
path: '',
redirectTo: 'list'
},
{
path: 'list',
component: MyListComponent,
outlet: 'left'
},
{
path: ':id',
component: MyDetailComponent,
outlet: 'right'
}
]
}
to
{
path: 'somePath',
component: SplitViewComponent,
children: [
{
path: '',
redirectTo: 'list'
},
{
path: 'list',
component: MyListComponent,
outlet: 'left'
},
{
path: ':id',
component: MyDetailComponent,
outlet: 'right'
}
]
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.