99

I have component with separated file of routing settings:

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

import { Route } from '../core/route.service';
import { extract } from '../core/i18n.service';
import {CalendarThematicPlanComponent} from './calendar-thematic-plan.component';

const routes: Routes = Route.withShell([
  { path: 'calendar', component: CalendarThematicPlanComponent }
]);

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: []
})

export class CalendarThematicPlanRoutingModule { }

When I typing URL address: http://localhost:4200/calendar I am redirected to home page.

How can I trace routing in Angular 2?

BenWurth
  • 790
  • 1
  • 7
  • 23
POV
  • 11,293
  • 34
  • 107
  • 201

5 Answers5

180

You can pass in a second argument with options:

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

Angular will then log all events to the browser's console, per the documentation:

enableTracing?: boolean
When true, log all internal navigation events to the console. Use for debugging.

devqon
  • 13,818
  • 2
  • 30
  • 45
  • Also I use another construction: `@NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule], providers: [] })` – POV Aug 14 '17 at 07:06
  • 4
    In the browser's console – devqon Aug 14 '17 at 07:07
  • 15
    I see nothing in console – POV Aug 14 '17 at 07:09
  • 2
    This helped me to debug a problem with my component's template. I was clicking on a link and nothing was happening, no sign on the console as well. Just adding this option resulted in a very detailed and helpful ```NavigationError``` event on the console. – Selçuk Cihan Apr 18 '19 at 10:04
  • 1
    @PRMan it's not an option in forChild() (as of august 2019) – Charaf Jul 19 '19 at 09:28
25

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

}
Tom
  • 4,776
  • 2
  • 38
  • 50
8

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.

Wouter van Koppen
  • 915
  • 7
  • 26
5

Although I am late to answer this. But it might be useful to newbies in Angular.

There are two ways with which you can trace angular route changes.

1. RouterModule (enableTracing)

You can set enableTracing to RouterModule which will log you all the route change events.

RouterModule.forRoot(routes, { 
  enableTracing: true,    /* <-- Set this to true */
}),

2. Subscribe to Router.events

If you don't want to trace all the router change events then you can subscribe to Router.events. With which you can filter specific route change events.

constructor(
  private router: Router,
  /* Other dependencies */
) {

  this.router.events
    .pipe(
      // You can also use traditional if else in the subscribe 
      filter(event => event instanceof NavigationStart)
    )
    .subscribe(event => {
      console.group(`Router event: ${event.constructor.name}`);
      console.log(event);
      console.groupEnd();
    });
}
Pankaj Prakash
  • 2,300
  • 30
  • 31
  • Did all that and it's all right on the console, but still is loading another component on the ion-router-outlet while keeping the right url on the address bar =/ – StudioWorks Sep 26 '22 at 19:59
0

If you're working with standalone components and bootstrapping your routing in the main.ts file, you pass this configuration in as a call to the function withDebugTracing:

// main.ts

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(
      MY_APP_ROUTES, // first argument is your routes array
--->  withDebugTracing(), // second argument and beyond are router features to be enabled
    ),
  ],
}).catch(console.error);

Source: https://angular.io/guide/standalone-components#configuring-dependency-injection

johnnycopes
  • 366
  • 5
  • 14