[Note To Self] Debugging Angular 4 Routing

DZone 's Guide to

[Note To Self] Debugging Angular 4 Routing

Are you looking for a way to easily debug your routing setup in Angular 4? Look no further and take a gander at this quick tip.

· Web Dev Zone ·
Free Resource

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:

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.

angular 4 ,routers ,web dev

Published at DZone with permission of Yohan Liyanage , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}