Sequence of Angular Router Events

The Angular API documentation page on Router Events lists the events raised by the Angular router, and claims “the events occur in the following sequence”.

What is missing, however, is at what step the components are created and initialized. And it turns out, that the sequence of events is a bit more complicated if you look closer.

If you want to debug the events yourself, you’ll find that you can easily log is the way of

this.router.events.subscribe((event: Event) => {
    console.log(event.type + ' ' + event.toString());
}

but if you want to stringify the whole event object, you will end up with a circular reference inside the Angular data structure, thus raising an Exception.