I'm facing an issue with my Angular2 application while utilizing the router.navigateByUrl method. Within my component, there is a function named goToRoute, structured as follows:
router.goToRoute(route:string, event?:Event):void {
if (event) {
if (event.defaultPrevented) {
return;
}
event.preventDefault();
}
this.router.navigateByUrl(route); // adding '/' before route does not work...
// close the menu if it was open and clicked!
if (this.menuOpen) {
this.toggleHamburger();
} }
I typically use this function within an ngFor loop in my HTML like so...
<div *ngFor="let route of routes ">
<div (click)="goToRoute(route.path, $event)"> {{ route.display }} </div>
</div>
However, upon clicking a div, I encounter the following error:
EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: 'about-us'
zone.js:461 Unhandled Promise rejection: Cannot match any routes: 'about-us' ; Zone: angular ; Task: Promise.then ; Value: Error: Cannot match any routes: 'about-us'(…)consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
zone.js:463 Error: Uncaught (in promise): Error: Cannot match any routes: 'about-us'(…)
This confusion arises even though my routes include the following (where DisplayRoutes is a custom type extending the Route object):
export const routes:DisplayRoutes = [
{
path: '',
display: 'Home',
component: HomeComponent
}, {
path: 'about-us',
display: 'About us',
component: LeftSubNavigation,
index: {
component: DetailMoreLayout
},
children: [
{
path: ':id',
component: DetailMoreLayout
}
]
}, {
path: 'teams',
display: 'Teams',
component: LeftSubNavigation,
index: {
component: DetailMoreLayout
},
children: [
{
path: ':id',
component: DetailMoreLayout
}
]
}
];
As evident, there is indeed a route named 'about-us'! Still, for some reason, the paths fail to align. When logging the route and event passed to the goToRoute method, the output looks like this...
about-us MouseEvent {isTrusted: true, screenX: 1809, screenY: 382, clientX: 42, clientY: 144…}
Currently making the transition from "@ngrx/router": "^1.0.0-beta.1" to
"@angular/router": "3.0.0-beta.2"router.navigateByUrl. The same issue arises with deep linking, like when accessing http://localhost:4200/about-us directly in the browser.
Your insights or recommendations are welcomed.