Repository navigation
Router: property 'component' of null when child router has no Redirect. #3979
Description
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
Activity
Ablu commentedon Sep 3, 2015
+1
I also stumbled over this.
Ablu commentedon Sep 4, 2015
@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 commentedon Sep 9, 2015
Amazing writeup, @ericmartinezr. I'll take a look at this tomorrow afternoon.
fix(router): throw when generating non-terminal link
dgroh commentedon Aug 2, 2017
Was this solved? I'm having the same issue when using redirect
ericmartinezr commentedon Aug 2, 2017
@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 commentedon Aug 29, 2017
I'm also having this issue when clicking a router link after navigating to that component from another.
bennadel commentedon Sep 13, 2017
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 commentedon Sep 24, 2017
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 commentedon Dec 5, 2017
@xkLander I'm stucking at this too...
Is there any solution?
ericmartinezr commentedon Dec 5, 2017
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 commentedon Apr 12, 2018
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 commentedon Aug 19, 2019
I have added the
<router-outlet></router-outlet>but still facing this issueangular-automatic-lock-bot commentedon Sep 19, 2019
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.