Skip to content

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

@ericmartinezr

Description

@ericmartinezr

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions