angular - ERROR TypeError: Cannot read property 'appendChild' of null

Question

I am trying to open nebular dialog by ngrx effect. It works, but not the first time.

First time appears error:

"ERROR TypeError: Cannot read property 'appendChild' of null"

If refresh page and the open dialog it opens

action.ts:

export const loadModal = createAction('[Products] Load Replenish Invoice Modal', props<{ payload: string }>());

effect.ts

loadModal$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(ProductsActions.loadModal),
        tap(action => {
          console.log(action);
          this.dialogService.open(ProductConfirmModalComponent, {});
        }),
      ),
    { dispatch: false },
  );

Here is my component where I am dispatching action:

ngOnInit() {
 this.sub = this.route.queryParams.subscribe(params => {
      this.store.dispatch(loadCurrencies({ payload: params.type }));
    });
}