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.

Advertisements

Angular2 Router Basics

In the learning curve of Angular2 router features, I ran into a bug that left my head scratching. Trying to render a routerLink would not create the necessary href url. As in:

<a  routerLink=”app/people-search” routerLinkActive=”active”><i class=”fa fa-search fa-fw” aria-hidden=”true”></i>People Search</a>

would render to:

<a _ngcontent-rxo-12=”” routerlink=”app/people-search” routerlinkactive=”active”><i _ngcontent-rxo-12=”” aria-hidden=”true” class=”fa fa-search fa-fw”></i>People Search</a>

As you can see, no href rendered, just the routerLink and routerLinkActive directives rendering as all lowercase attributes. Weird.

Well not so if I had actually picked up this line from the documentation:

RouterLink, RouterLinkActive and RouterOutlet are directives provided by the Angular RouterModulepackage. They are readily available for us to use in our template.

Duh.

I added the

import { RouterModule } from ‘@angular/router’;

statement to my module definition file and I was back in business.

Basics.