Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

[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

Tips, tricks and tools for creating your own data-driven app, brought to you in partnership with Qlik.

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: "/"}


Explore data-driven apps with less coding and query writing, brought to you in partnership with Qlik.

Topics:
angular 4 ,web dev ,routers

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 }}