Как сделать несколько HTTP-вызовов в Angular6, используя forkJoin и ngrx?

Сценарий

В моем приложении angular6 у меня есть три категории: catA, catB, catC. Каждой категории нужны данные из 3 API. При нажатии любой категории загружается компонент CategoryDetailsComponent, я отправляю действие (LoadCategoryDetails).

Я реализовал forjoin для выполнения параллельных вызовов API (в сервисе), а также resolver для обеспечения выполнения всех вызовов, только после этого компонент должен загружаться.

Проблема

• При нажатии catA (или перезагрузке страницы) массив categoryNames пуст
• При нажатии catB (вторая маршрутизация) массив CategoryNames показывает список предыдущей категории (catA)

Возможно, один из вызовов api требует времени. и мой преобразователь настроен неправильно.

Вопрос

Как настроить эффекты и преобразователь ??

Как использовать forkjoin для выполнения нескольких вызовов и отправки данных компоненту?

Код

1. dipatch action and subscribe to selector

   ngOnInit() {
       const id = parseInt(this.route.snapshot.paramMap.get('categoryId'), 10);
       this.store.dispatch(new fromCategory.LoadCategoryDetails(id));
   
       this.store.select(getCategoryDetails)
                 .subscribe((data) => {
                   this.categoryDetails = data[0];
                   this.journeys = data[1];
                   this.categories = data[2];
                 });
   
       // filter only category name
       // problem
       this.categories.forEach( category => {
         this.categoryNames.push(category.name);
       });
   }

2. effects (look for action and call service)

   @Effect()
   loadCategoryDetails$ = this.actions$.pipe(
       ofType<fromCategory.LoadCategoryDetails>(CategoryActionTypes.LoadCategoryDetails),
       switchMap((action) => {
       return this.categoryService.getCategoryDetails(action.payload).pipe(
           map(data => new fromCategory.LoadCategoryDetailsSuccess(data))
       );
       })
   );

3. service func making multiple calls and using forkjoin

   import { forkJoin } from 'rxjs';
   
   getCategoryDetails(categoryId) {
       const categoryDetails = this.http.get(url);
       const journeys = this.http.get(url);
       const courses = this.http.get(url);
   
       return forkJoin([categoryDetails, journeys, courses]);
   }

4. resolver

   export class CategoryDetailsResolver implements Resolve<any> {
   
       constructor(
           private categoryService: CategoryService,
           private router: Router) {}
   
       resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
           const categoryId = route.paramMap.get('categoryId');
           return this.categoryService.getCategoryDetails(categoryId);
       }
   }

Заранее спасибо.