材料 UI 下拉菜单导致 IE11 中出现错误

Question

不幸的是，我们必须支持IE11。

以下是我们应用程序中的 Angular 片段：

<nav class="navbar-menu" fxFill>
<span class="fill-it"></span>
<span class="nav-user-wrap" fxFlexAlign="right">
<button class="nav-user" mat-button [matMenuTriggerFor]="usrmenu">{{ userManager.currentDealer?.name }} <mat-icon class="icon-avatar">person</mat-icon><mat-icon class="icon-arrwdwn">keyboard_arrow_down</mat-icon></button>
<mat-menu #usrmenu="matMenu" class="userdd mmdd" xPosition="after" yPosition="below" [overlapTrigger]="false">
<span mat-menu-item [disabled]="true" [disableRipple]="true">{{ userManager.firstName }} {{ userManager.lastName }}</span>
<mat-divider style="border-color: rgba(255,255,255,0.8); margin: 0 16px;"></mat-divider>
<span mat-menu-item *ngIf="!userManager.isDealerGroupUser" (click)="openSelectDealerGroupDialog()">{{ userManager.dealerGroup?.name }}</span>
<mat-divider *ngIf="!userManager.isDealerGroupUser" style="border-color: rgba(255,255,255,0.8); margin: 0 16px;"></mat-divider>
<button *ngFor="let dealer of userManager.dealers" (click)="userManager.setCurrentDealer(dealer.id)" mat-menu-item>{{ dealer.name }} <span *ngIf="dealer.id === userManager.defaultDealer?.id">(Default)</span></button>
<mat-divider style="border-color: rgba(255,255,255,0.8); margin: 0 16px;"></mat-divider>
<!-- <button mat-menu-item>My Account</button>
<button mat-menu-item>Settings</button> -->
<button mat-menu-item (click)="logOut()">Logout</button>
</mat-menu>
</span>
</nav>

非常标准的下拉菜单，但在IE11中单击该按钮会出现以下异常：

Unable to get property 'opacity' of undefined or null reference

我正在拔头发，试图找出原因。 IE11是否在后台做了某种伪脚本来设置CSS或其他东西？不知道。

所有的帮助感谢！

Answer 1

此错误是IE11缺少Web动画API的结果，要解决此问题，您必须导入正确的polyfill，如Angular Docs中所述。

import 'web-animations-js'

Answer 2

Angular 文档说，如果您使用 AnimationBuilder，您只需要 IE 的 'web-animations-js' polyfill，但我的项目不使用 AnimationBuilder，我收到此错误消息。 我正在使用的库之一有可能。但是我只是在升级到 Angular 8 后才开始收到此错误。