Router: property 'component' of null when child router has no Redirect.

It took me a while to figure it out this one

TL;DR When you step in a route which has a nested router without a Redirect in it, it will throw this error message

EXCEPTION: TypeError: Cannot read property 'component' of null
angular2.dev.js:22746 STACKTRACE:
angular2.dev.js:22746 TypeError: Cannot read property 'component' of null
    at execute.RouterOutlet.commit (router_outlet.js:54)
    at ChildRouter.execute.hostComponent.commit (router.js:195)
    at execute.RouterOutlet._commitChild (router_outlet.js:77)
    at router_outlet.js:65
    at Zone.run (angular2.dev.js:136)
    at Zone.execute.$__3._createInnerZone.zone.fork.fork.$run [as run] (angular2.dev.js:16756)
    at zoneBoundFn (angular2.dev.js:109)
    at lib$es6$promise$$internal$$tryCatch (angular2.dev.js:1391)
    at lib$es6$promise$$internal$$invokeCallback (angular2.dev.js:1403)
    at lib$es6$promise$$internal$$publish (angular2.dev.js:1374)

The TL;DR is too confusing, explaining it a little bit more.

Consider the following code

@RouteConfig([
  new Route({path:'/main/...', component : NestedRouter, as : 'main'})
])
class MainRouter {}

@RouteConfig([
  new Route({path:'logged', component: LoggedInCmp, as : 'logged'}),
  new Route({path:'login', component: LoginFormCmp, as : 'login'}) 
])
class NestedRouter {}

If I step in ‘myproject/#/main’ it will throw the error above. This error message dissapears if I add a Redirect in the nested router, which will redirect me (obviously) to the specified path. If I step directly in some child router’s path it will work with no error.

@RouteConfig([
  new Redirect({path: '', redirectTo: 'login'}),
  new Route({path:'logged', component: LoggedInCmp, as : 'logged'}),
  new Route({path:'login', component: LoginFormCmp, as : 'login'}) 
])
class NestedRouter {}

I didn’t know about Redirect so I had my own logic to redirect to some path

@RouteConfig([
  new Route({path:'logged', component: LoggedInCmp, as : 'logged'}),
  new Route({path:'login', component: LoginFormCmp, as : 'login'}) 
])
class NestedRouter {
  constructor(router: Router) {
     if(somethingIsTrue) {
        router.navigate('main/logged');
     } else {
        router.navigate('main/login');
     }
  }
}

The navigation worked but with the error message.

So basically the idea is to advise the user to add a Redirect when is a nested router, or avoid the error message since the nested router can work too as a main component so forcing the component to be redirected it won’t be the better solution in every case.

Here’s a plnkr, using alpha36, so you can check it out (just uncomment the Redirect)

Edit

@Ablu has ran into the same issue (see gitter chat) and from his plnkr it seems that the problem is no the abscence of a Redirect but that it is not recognizing the specified component. When I do path:'main/...', component : MainComponent, ... it doesn’t recognize MainComponent as the component handling the path main/. The Redirect workaround works because it skips directly to some children path, but when we are in the main children path it fails

[jsgoupil]

For those hitting this issue and landing on this bug, you are most likely missing a <router-outlet></router-outlet> in your parent component.

[dgroh]

Was this solved? I’m having the same issue when using redirect