Nebular Dialog неправильно отображается при добавлении двух к одному компоненту

Question

У меня есть два разных диалоговых окна Nebular и один основной компонент, где у меня есть две кнопки для открытия каждого из моих двух диалогов. Но когда я открываю их, они ведут себя странно. Один компонент отображается правильно в первый раз, но в следующий раз отображается в верхнем левом углу, а некоторые стили отсутствуют. Второй всегда отображается неправильно.

Я проанализировал сгенерированный HTML и обнаружил, что он отличается. Первое изображение показывает cdk-overlay-container при первом открытии диалогового окна, а второе изображение показывает тот же элемент при втором открытии диалога. Это различие вызывает появление диалогового окна в верхнем левом углу.

I Я также сталкиваюсь с проблемой, что в диалогах отсутствуют стили (не первый, когда он расположен правильно). Кнопки и поля ввода внутри диалоговых окон отображаются как обычные html элементы.

Мой код для открытия диалогов:

export class LoginPageComponent implements OnInit {
  constructor(
      private dialogS: NbDialogService,
  ) {   }

  open2() {
      this.dialogS.open(SettingsDialogComponent);
  }

  open1() {
      this.dialogS.open(CreateTodoDialogComponent);
  }
}

Где я делаю ошибку или как открыть два разных диалога из одного компонента?