После обновления Angular 5-8 диалоговые окна материалов отображаются в DOM, но не отображаются на экране.

После завершения обновления с Angular 5 до 8 почти все работает, кроме модальных диалогов Material. Используя отладчик браузера, мы видим, что структура находится в DOM, но они не отрисовываются. Изначально мы использовали модуль No-op Animator. Когда я переключил его на модуль BrowserAnimations, появилось диалоговое окно для анимации, но как только анимация была завершена, оно исчезло визуально. Он все еще там, и вы можете частично взаимодействовать с ним — если вы щелкнете там, где должна отображаться кнопка «Закрыть», диалоговое окно закроется. (Вы можете сказать это, потому что «стеклянная»/серая крышка экрана исчезла.) Мы исправили все модульные тесты (более 2500), и они работают на 100% чисто, и большая часть приложения работает так, как ожидалось. Просто диалоги пропадают визуально.

Вещи, которые я уже пробовал:

1. установка z-индекса различных элементов на нелепые значения (25000) с помощью инструментов отладки Chrome
2. явная установка свойств отображения CSS для «блокировки» различных элементов с помощью отладчика
3. явная установка видимости CSS на «видимую»
4. установка непрозрачности CSS явно на «1»
5. проверено, что все компоненты диалога перечислены в EntryComponents модуля, в котором они находятся (и что этот модуль импортирован в основной модуль приложения)

С Angular 5 все работало нормально — это определенно побочный эффект обновления. Я подозреваю, что это может быть взаимодействие Материала с каким-то другим модулем, который мы используем, который раньше хорошо работал вместе, но больше не работает. Однако я не уверен, что это может быть и как это понять. Для этого мы используем следующее (экстракт package.json):

  "dependencies": {
    "@angular/animations": "^8.2.1",
    "@angular/cdk": "^8.1.2",
    "@angular/common": "^8.2.1",
    "@angular/compiler": "^8.2.1",
    "@angular/core": "^8.2.1",
    "@angular/flex-layout": "^8.0.0-beta.27",
    "@angular/forms": "^8.2.1",
    "@angular/material": "^8.1.2",
    "@angular/material-moment-adapter": "^8.1.2",
    "@angular/platform-browser": "^8.2.1",
    "@angular/platform-browser-dynamic": "^8.2.1",
    "@angular/router": "^8.2.1",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "bootstrap": "^4.3.1",
    "classlist.js": "^1.1.20150312",
    "core-js": "^3.2.1",
    "hammerjs": "^2.0.8",
    "jwt-decode": "^2.2.0",
    "moment": "^2.24.0",
    "ngx-bootstrap": "^5.1.1",
    "pdfjs-dist": "^2.1.266",
    "rxjs": "^6.5.2",
    "ts-helpers": "^1.1.2",
    "tslib": "^1.10.0",
    "velocity-animate": "^1.5.2",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.9.1"
  },

В моем app.module.ts у меня есть следующее:

@NgModule({
    imports: [
        <<<snip>>> ModalTemplatesModule, 
        BrowserAnimationsModule, <<<snip>>>    ],

И тогда ModalTemplatesModule определяется как:

const modalTemplates: any[] = [
    ModalTimeoutComponent,
    ConfirmActionModalComponent,
    // etc...
];

@NgModule({
    imports: [
        SharedModule,
        ReactiveFormsModule,
        FormsModule,
        CommonComponentsModule,
        CommonNonComponentsModule
    ],
    declarations: modalTemplates,
    exports: modalTemplates,
    providers: [
        ConfigService,
        TransactionService
    ],
    entryComponents: modalTemplates
})
export class ModalTemplatesModule {}

Мы создали оболочку для всех наших модальных окон, в которую мы затем помещаем конкретное содержимое диалога. Так что если что-то не так с кодом, скорее всего, в этом классе. Но это довольно просто... Шаблон ModalWrapper:

<div fxLayoutAlign="center center" fxLayout="column" fxFlexFill>
    <div class="modal-wrapper full-width" fxLayout="column" fxLayoutAlign="center center">
        <div *ngIf="showCloseButton" class="full-width" fxLayoutAlign="end end" fxLayout="column" fxFlex="none">
            <button id="closeButton" class="close-button-outside" (click)="close()" #closeButton>
            <span fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="0.5rem">
                <i class="icon-close-hover"></i>
                <span>{{"common.buttons.close" | translate}}</span>
            </span>
            </button>
        </div>
        <ng-content></ng-content>
    </div>
</div>

Фактический тег находится в шаблонах компонента, который помещается в оболочку через .

Модальный компонент оболочки

@Component({
    selector : 'modal-wrapper',
    templateUrl: './modal-wrapper.component.html',
    styleUrls: ['./modal-wrapper.component.scss']
})
export class ModalWrapperComponent {
    @Output() onClose: EventEmitter<void> = new EventEmitter<void>();
    @Input() showCloseButton: boolean = true;

    constructor() {}

    close(): void {
        this.onClose.emit();
    }
}

На данный момент у меня заканчиваются идеи, почему он исчезает и как это исправить. Надеясь, что кто-то еще столкнулся с этим, признает проблему и знает, как ее исправить!

Обновление: если я использую подключаемый модуль специальных возможностей WAVE для Chrome и "отключаю все CSS", диалоговые элементы отображаются внизу экрана. Таким образом, можно предположить, что это проблема, связанная со стилем. Есть ли другой способ что-то "скрыть"??