Есть ли общие проблемы между маршрутизацией и диалогами матов в Angular?

Question

Я хотел открыть диалоговое окно с матом, нажав на иконку. Этот диалоговый диалог представляет собой разделенную панель, в левой части которой есть кнопки, которые можно нажимать, а в правой части - пространство содержимого, в которое должны загружаться другие компоненты при нажатии на конкретную кнопку. Теперь я следовал рекомендациям исходной документации по маршрутизации на https://angular.io/guide/router , но когда я щелкнул первый значок, чтобы открыть диалоговое окно, его стиль был изменен, и он не открылся в форме диалог больше. Теперь я решил, что могу просто сохранить стиль диалога, изменив URL в методе вызова диалога следующим образом

dialogRef.afterOpened().subscribe(result => {
      this.router.navigate(['/dialog']);
    });
   dialogRef.afterClosed().subscribe(result => {
     this.router.navigate(['']);
    });

Таким образом, URL-адрес изменился с открытием и закрытием диалога так, как я хотел. Но у меня есть другой модуль маршрутизации с другим компонентом, который прекрасно работает до открытия диалогового окна, но после этого больше не работает. И теперь загрузка компонента через маршрутизацию и использование <router-outlet> в теге html также не работает. Теперь мой вопрос: есть ли какие-то общие проблемы с mat-dialog и маршрутизацией, которые я мог бы решить другим способом? Обязательно ли кодировать пользовательский диалог (не используя mat-dialog)? Раньше у меня все работало нормально с сервисом, хотя я думал, что изменение URL и открытие компонентов с помощью навигации будет намного меньше кода и более приятным решением.

Надеюсь, кто-нибудь сможет объяснить мне эту проблему и то, что на самом деле происходит. Я мог бы предоставить более общий код, но, как я уже сказал, я в значительной степени следовал официальной документации. Заранее спасибо!