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

[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

[Ablu]

+1

I also stumbled over this.

[Ablu]

@ericmartinezr asked me to attach my example since it is a bit different:
http://plnkr.co/edit/BXXEtZ

The error happens when clicking the "Page 1" link.

[btford]

Amazing writeup, @ericmartinezr. I'll take a look at this tomorrow afternoon.

[dgroh]

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

[ericmartinezr]

@dgroh this issue is extremely old and for a version of the router that's dead. You better open a new issue with a reproduction of the issue.

Edit. You already did, disregard my comment.

[elliotwesoff]

I'm also having this issue when clicking a router link after navigating to that component from another.

[bennadel]

I'm hitting this error (not with a redirect but with my Back button) in 4.4.0-RC.0. The issue is that I have a conditionally-rendered <router-outlet> which may not be in the DOM at the time the back-button is hit. I'll see if there an existing ticket for this specific issue somewhere.

[leandrit1]

I am hitting this error, even though I have defined a router in router module, for example the main route 'users' shows up but when I want to go to its children, i.e 'users/stats' it throws this error.
I am reading about this error and it looks to be a vague description, related to many things. Makes it really tough to debug :(

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'component' of null
TypeError: Cannot read property 'component' of null
at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseRoutes (router.es5.js:4346)
at router.es5.js:4308
at Array.forEach ()
at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseChildRoutes (router.es5.js:4307)
at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseRoutes (router.es5.js:4338)
at router.es5.js:4308
at Array.forEach ()
at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseChildRoutes (router.es5.js:4307)
at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverse (router.es5.js:4264)
at MapSubscriber.project (router.es5.js:4103)
at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseRoutes (router.es5.js:4346)
at router.es5.js:4308
at Array.forEach ()
at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseChildRoutes (router.es5.js:4307)
at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseRoutes (router.es5.js:4338)
at router.es5.js:4308
at Array.forEach ()
at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverseChildRoutes (router.es5.js:4307)
at PreActivation.webpackJsonp.../../../router/@angular/router.es5.js.PreActivation.traverse (router.es5.js:4264)
at MapSubscriber.project (router.es5.js:4103)
at resolvePromise (zone.js:795)
at resolvePromise (zone.js:766)
at zone.js:844
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.es5.js:3881)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:192)
at drainMicroTaskQueue (zone.js:602)
at ZoneTask.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:503)
at invokeTask (zone.js:1427)

[oswald0071]

@xkLander I'm stucking at this too...

Is there any solution?

[ericmartinezr]

Guys, if you're having the same error message open a new issue with a reproduction of the case. I opened this one 2 years ago with the first router iirc, so this issue doesn't apply to the latest router.

[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.

[jamalumusic]

I have added the <router-outlet></router-outlet> but still facing this issue

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}