[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.
by
Join the DZone community and get the full member experience.
Join For FreeTips, 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.
Like This Article? Read More From DZone
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.linkDescription }}
{{ parent.urlSource.name }}