Grouping by navigation ID

The router assigns a unique ID to every navigation, which we can use to correlate events. Perform the following steps.

1. Let's start with defining a few helpers used for identifying the start and the end of a particular navigation:

   function isStart(e: Event): boolean {
     return e instanceof NavigationStart;
   }
   
   function isEnd(e: Event): boolean {
     return e instanceof NavigationEnd ||
            e instanceof NavigationCancel ||
            e instanceof NavigationError;
   }
   

2. Next, let's define a combinator that will take an observable of all the events related to a navigation and reduce them into an array:

   function collectAllEventsForNavigation(obs: Observable):
     Observable<Event[]>{
     let observer: Observer<Event[]>;
     const events = [];
     const sub = obs.subscribe(e => {
       events.push(e);
       if (isEnd(e)) {
         observer.next(events);
         observer.complete();
       }
     });
     return new Observable<Event[]>(o => observer = o);
   }
   

3. Now...