How to trace routing in Angular 2?

Question

I have component with separated file of routing settings:

import { NgModule } from \'@angular/core\';
import { Routes,         


        

Answer 1

As the comments in the most accepted answer suggest, this enableTracing doesn't work in the forChild method. A simple work around is to subscribe to all routing events in AppModule like so:

export class AppModule {

  constructor(
    private readonly router: Router,
  ) {
    router.events
      .subscribe(console.log)
  }

}

Answer 2

You can pass in a second argument with options:

imports: [
    RouterModule.forRoot(
      routes,
      { enableTracing: true } // <-- debugging purposes only
    )
]

Answer 3

In addition to devqons excellent answer: Debugging your route definitions will be much easier if you temporarily out-comment wildcard routes. Wildcard routes are handy in production to show e.g. a NotFound component, but are a pain while debugging.

For example:

const routes: Routes = [
    ... (your route definions)

    // If you have a catch-all route defined, outcomment is like below
    // {
    //     path: '**',
    //     redirectTo: '/error/not-found',
    // },
];

After outcommenting your catch-all route, the router will not swallow your error and show in your browser console exactly what route could not be matched against your definitions.

For example, when the following error is shown:

core.js:4002 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'projects/123'
Error: Cannot match any routes. URL Segment: 'projects/123'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2459)

you immediately known that there is a problem with matching 'projects/123' in your route definitions.