angular: Router Cannot read property 'path' of undefined

[ x] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

I am using mgechev seed to do some testing so I have a home routes and about routes

In my app component I am trying to navigate to the home route with this.router.navigate(['', {foo: 'bar'}]);

The issue is that this does not work as expected. If the user is currently on the about route this.router.navigate(['', {foo: 'bar'}]); will send them to /about;foo=bar, if the user is on the home route it produces the error Cannot read property 'path' of undefined

Expected/desired behavior

If the user is on the about route this.router.navigate(['', {foo: 'bar'}]); should send them to the home route with query params ;foo=bar. If the user is already on the home route it should just change the query params.

If the user is on the about route and wants to change the query params it should require this code instead this.router.navigate(['about', {foo: 'bar'}]); otherwise there is no way to navigate to the home route from the about route

What is the motivation / use case for changing the behavior? Being able to change the query params on a route with an empty path such as the home route in this example.

Angular version: 2.0.0-rc.4

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 1
Comments: 22 (7 by maintainers)

Most upvoted comments

I’m having this issue too when I have children routes with same path as ‘’ and send parameters, for exemple:

export const routes = [
    { path:'', component: MainComponent, children: [{
                path: '', component: ChildComponent,
         }]
    }
];

<a [routerLink]="['./', {param:'value'}]">Link</a>

raphaelluchini on Apr 10, 2017

@Andrey-Pavlov I ran into the exact same problem (converting existing routes to lazy-loaded ones), you helped me pinpoint it. It seems like you can’t put matrix parameters on a lazy-loaded route that has an emtpy path (‘’). I worked around it with (adapted to your example) …

export const routes = [
    { path:'', redirectTo: 'test', pathMatch: 'full'},
    { path: 'test', component: TestComponent }
];

… and now it does work. I don’t mind the extra path, but it might not be very meaningful in some situations.

dpalita on Feb 12, 2017

We’re also seeing the same issue with Angular 6.1 when using components with empty paths (e.g., “list” components) and using matrix parameters to represent the selected item through [routerLink], e.g., “[‘.’, {id: entry.id}]”.

mathiasslawik on Oct 15, 2018

this is still an issue, trying to reload current route with different matrix parameters and having no mandatory params this.router.navigate(["./", {foo: 'bar'}], {relativeTo: this.route}) causes Cannot read property ‘path’ of undefined

chpasha on Dec 17, 2016

This is still an issue. Any workarounds?

lazarljubenovic on Nov 27, 2017