在从 Angular 5 迁移到 6 之后，现在在我们的项目中，我们有一个奇怪的行为。
我们犹豫在 Material 项目或 Angular cli 中打开这个问题。
我们的依赖是：
"dependencies": {
"@angular/animations": "^6.0.6",
"@angular/cdk": "^6.3.3",
"@angular/common": "^6.0.6",
"@angular/compiler": "^6.0.6",
"@angular/core": "^6.0.6",
"@angular/flex-layout": "6.0.0-beta.16",
"@angular/forms": "^6.0.6",
"@angular/http": "^6.0.6",
"@angular/material": "^6.3.3",
"@angular/platform-browser": "^6.0.6",
"@angular/platform-browser-dynamic": "^6.0.6",
"@angular/router": "^6.0.6",
....
}
"devDependencies": {
"@angular-devkit/build-angular": "~0.6.8",
"@angular/cli": "^6.0.8",
"@angular/compiler-cli": "^6.0.6",
"@angular/language-service": "^6.0.6",
.....
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.7.2"
}
在开发模式下，使用“ng serve”一切正常，但在使用“ng serve --prod”的 prod 模式下，我们遇到了问题。
- 第一个问题是，Firefox 浏览器（52.8.0）中的所有“mat-select”都没有正确显示。
mat select 的内容显示在页面底部（此行为仅存在于 firefox 中）。
经过一番调查，我们发现“cdk-overlay-pane”类在 DEV 和 PROD 中是不同的。
- 在开发中“cdk-overlay-pane”有一个属性“top :202.094px”
- 在产品“cdk-overlay-pane”中有一个属性“底部：-204.134px”（这会导致问题）。
- 第二个问题是，只有 prod 模式下，材质对话框无法正确显示在 chrome 中。
使用以下配置：
const dialogRef = this.dialog.open(UserKillSessionsDialogComponent, {
width: '500px',
data: this.currentUser
});
在开发中，对话框正确显示
在 prod 中，对话框没有正确显示，它占据了页面的所有高度。
在迁移之前，如果没有“高度”配置，对话框的高度会动态获取内容的高度。
现在，高度配置仅在 prod 模式下是强制性的（并且仅在 chrome 中）。
非常感谢您的帮助。