Angular2 Routing Error

One of the better things about Angular2 which had already present in Angular1 was the outputting of meaningful errors whenever they happened within the framework. Unfortunately with the new angular-cli webpack based build, it’s not always easy to understand what is happening with certain errors. Consider this error I recently ran into:

error_handler.js:47 EXCEPTION: Uncaught (in promise): TypeError: Cannot read property ‘_outlets’ of undefined
TypeError: Cannot read property ‘_outlets’ of undefined
at http://localhost:4200/main.bundle.js:13434:56
at forEach (http://localhost:4200/main.bundle.js:5950:13)
at PreActivation.deactiveRouteAndItsChildren (http://localhost:4200/main.bundle.js:13433:99)
at http://localhost:4200/main.bundle.js:13435:19
at forEach (http://localhost:4200/main.bundle.js:5950:13)
at PreActivation.deactiveRouteAndItsChildren (http://localhost:4200/main.bundle.js:13433:99)
at http://localhost:4200/main.bundle.js:13435:19
at forEach (http://localhost:4200/main.bundle.js:5950:13)
at PreActivation.deactiveRouteAndItsChildren (http://localhost:4200/main.bundle.js:13433:99)
at PreActivation.traverseRoutes (http://localhost:4200/main.bundle.js:13418:22)

Can you figure out what is going on? I could not for a while, this happened while trying ti lazy load a module. I checked the component rendered by the path and the <router-outlet> tags where present as expected. It’s not until I checked the component class file that I found a line that did this:

this.router.navigate([‘session’], { relativeTo: this.activatedRoute });

Within the ngOnInit. Bingo! The session path did not exist within all my route definitions.

So the next time this happens to you make sure you are trying to navigate to a path that actually exists in your route definitions.

Published by Abou Kone

I am a front end architect with 10+ years of experience in web development. The best part of the process for me is converting ideas into code and solving the technical problems that come along. Alongside providing technical leadership and architectural support to projects spanning multiple industries, I am also experienced in leading discussions with designers, developers, and business stakeholders helping to guide teams in turning complex business workflows or data into easy-to-use web and mobile interfaces. I believe in delivering high quality products and am constantly looking into improving the process and tools use to achieve this goal.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: