[Note To Self] Debugging Angular 4 Routing

There’s a neat way to debug how routing works in Angular 4. The router module has a built-in tracing support which can be activated by passing a flag when it’s added to the app routes, like so:

@NgModule({
imports: [ RouterModule.forRoot(routes, { enableTracing: true }) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}

Now, angular will log it’s routing decisions in the console.

Router Event: NavigationStart
platform-browser.es5.js:1028 NavigationStart(id: 1, url: '/')
platform-browser.es5.js:1028 NavigationStart {id: 1, url: "/"}
core.es5.js:3025 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
platform-browser.es5.js:1037 Router Event: RoutesRecognized
platform-browser.es5.js:1028 RoutesRecognized(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } )
platform-browser.es5.js:1028 RoutesRecognized {id: 1, url: "/", urlAfterRedirects: "/", state: RouterStateSnapshot}
platform-browser.es5.js:1037 Router Event: NavigationEnd
platform-browser.es5.js:1028 NavigationEnd(id: 1, url: '/', urlAfterRedirects: '/')
platform-browser.es5.js:1028 NavigationEnd {id: 1, url: "/", urlAfterRedirects: "/"}

If you enjoyed this article and want to learn more about Angular, check out our compendium of tutorials and articles from JS to 8.