What's the problem in that Angular 7 rxjs subscription from a resolver

Question

I wrote a short code to try routes resolver and subscriptions in component. Here is the route configuration :

  {
    path: '',
    component: EventsComponent,
    resolve: {
      events: EventsResolverService
    }
  },
  ...

Resolver simply implements Resolve interface :

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { EventInterface } from './event-interface';
import { EventsService } from './events.service';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class EventsResolverService implements Resolve<Map<number, EventInterface>> {

  constructor(private eventsService: EventsService) { }

  public resolve(): Observable<Map<number, EventInterface>> {
    console.log('Resolver in progress');
    return this.eventsService.asObservable();
  }
}

Yet, the service i use to get the Events Map as Observable :

  public asObservable(): Observable<Map<number, EventInterface>> {
    if (this.events.size) {
      return of(this.events);
    } else {
      this._hydrate();
      console.log('Events are : ' + this.events.size);
      return of(this.events);
    }
  }

Finally, in the ngOnInit() method of the component :

  public ngOnInit(): void {
    this.activatedRoute.data.subscribe(
      (events: Map<number, EventInterface>) => {
        console.log('Hi events resolved ' + events.size);
        this.eventsMap = events;
      },
      (error: any) => {
          console.log('Something went wrong : ' + error);
      }
    );
  }

The console message always return : undefined but in the service, events map size is correctly returned :

So what's wrong with that piece of code ?

Answer 1

You are handling the value emitted by ActivatedRoute.data in wrong manner.

this.activatedRoute.data.pipe(map(data=>data.events)).subscribe(
      (events: Map<number, EventInterface>) => {
        console.log('Hi events resolved ' + events.size);
        this.eventsMap = events;
      },
      (error: any) => {
          console.log('Something went wrong : ' + error);
      }
    );