Angular2 Router v3, navigate to different level: TypeError: Cannot read property '_routeConfig' of null

Question

I'm using new Router v3.0.0-alpha.3. Imagine my routes looks like:

                              App
                              /\
                             /  \
                       Settings  Main
                          / \        
                         /   \      
                       User  Account

From the view of User component I would like to navigate to Main component. If I navigate to any component within the Settings level it works fine, but when I try to navigate to other level I get an error:

EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property '_routeConfig' of null

I naviagate using routerLink directive:

[routerLink]="['/main']"           <- doesn't work
[routerLink]="['/settings']"       <- works
[routerLink]="['/settings/user']"  <- works

This seems like a global issue. I can only navigate within this same level. Any Idea how I can bypass it?

My routes passed to bootstrap:

export const routes: RouterConfig = [
    ...MainRoutes,
    ...SettingsRoutes
];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)
];

main.routes.ts:

export const MainRoutes: RouterConfig = [{
    path: '/main',
    component: SettingsComponent
}];

settings.routes.ts:

export const SettingsRoutes: RouterConfig = [{
    path: '/settings',
    component: SettingsComponent,
    children: [{
        path: '/user',
        component: UserSettingsComponent,
        index: true
    }]
}];

Edit:

As given link in comments doesn't work anymore I will suggest the temporary fix. The bug still exists in alpha.7 version of router but is going to be fixed here

The problem is in router.js file, function GuardChecks.prototype.runCanDeactivate line 309 (in router v.alpha.7):

var canDeactivate = curr._routeConfig ? curr._routeConfig.canDeactivate : null;

change it to:

var canDeactivate = curr && curr._routeConfig ? curr._routeConfig.canDeactivate : null;

Please remember that this should be treated as temporary fix, not suitable for automated production environment!

Answer 1

Update: fixed in alpha.8

---

Until a new @angular/router is released, you'll want to update the source code manually as discussed here:

https://github.com/angular/angular/issues/9480#issuecomment-227845866