Mark Sandman Mark Sandman - 4 months ago 501
TypeScript Question

Angular2 EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes:

I'm currently experiencing a problem with my Angular2 app when using the

router.navigateByUrl
method. I have a function in my component called
goToRoute
, it looks like so:

router.goToRoute(route:string, event?:Event):void {
if (event) {
if (event.defaultPrevented) {
return;
}
event.preventDefault();
}

this.router.navigateByUrl(route); // prefixing with '/' does nothing here...
// if the menu has been clicked and it was open close it!
if (this.menuOpen) {
this.toggleHamburger();


}
}

I would use this in an
ngFor
in my HTML like so...

<div *ngFor="let route of routes ">
<div (click)="goToRoute(route.path, $event)"> {{ route.display }} </div>
</div>


Now when I click a div I get the 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 is strange as in my routes I have the following (
DisplayRoutes
is a custom type I made by 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 you can see I do have a route called 'about-us'! For some reason, despite the match of names the paths aren't being matched? I put a console log in my goToRoute method to output the
route
and
event
to see what was being passed... I got this...

about-us MouseEvent {isTrusted: true, screenX: 1809, screenY: 382, clientX: 42, clientY: 144…}


I am currently switching from the
"@ngrx/router": "^1.0.0-beta.1"
to
"@angular/router": "3.0.0-beta.2"
. I have a base tag, just things seem to crash when I use
router.navigateByUrl
. I then noticed the same would happen should I deep link, for example when I go to http://localhost:4200/about-us in the browser.

Any advice is appreciated.

Answer

You have to have prefix '/' there.

Secondly, as about-us is non terminating route (has children) you need to define a children with ''(empty) path. It may redirect to any existing routes.

{path: '', redirectTo: 'other-path', pathMatch: 'full'}

Secondly I assume your extension will take care of display and index var in config as it is not there in default Routes type.

Have a look at official tutorial

Another so question detailing how to use multi level routing.

Comments