angular resolver does not work with ngrx store observable

Question

I've tried two variations of resolvers

First - without store. It works

// @Injectable({
//   providedIn: 'root',
// })
// export class EmptyStateResolver implements Resolve<EmptyState> {
//   constructor() {}

//   resolve() {
//     const data = {
//       svg: 'test'
//       message: 'To see additional information, please select element from the list',
//       header: `Selected groups: `,
//     };

//     return data;
//   }
// }

Second, with store Observable. doest not. The component is not displayed. and literally nothing happens, 0 errors etc.

constructor(protected readonly store$: Store) {}

  resolve(route: ActivatedRouteSnapshot): Observable<EmptyState> {
    return this.store$.select(selectors.getAllSelectedIDs).pipe(
      map((ids: ID[]) => {
        const data = {
          svg: '',
          message: !ids.length
            ? 'To see additional information, please select element from the list'
            : 'Use toolbar to perform desired actions for selected Items',
          header: `Selected groups: ${ids.length}`,
        };

        return data;
      })
    );

Why is that ? Moreover, when Im debugging in chrome devtools. Is stops on "return data" statement with values. So it clearly fires, but nothing happens

Answer 1

te solution was use of first() operator in pipe, but its not clear to me why it works.