Question

从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”，我们会遇到问题。

-第一个问题是，firefox浏览器（52.8.0）中的所有“ mat-select”都无法正确显示。

垫选择的内容显示在页面底部（此行为仅在firefox中存在）。

经过一些调查，我们发现DEV和PROD中的“ cdk-overlay-pane”类有所不同。

在开发人员的“ cdk-overlay-pane”中，属性为“ top：202.094px”
在产品中，“ cdk-overlay-pane”的属性为“底部：-204.134px”（这会引起问题）。

-第二个问题是，材质对话框仅在生产模式下无法正确显示在chrome中。

具有以下配置：

const dialogRef = this.dialog.open(UserKillSessionsDialogComponent, {
 width: '500px',
 data: this.currentUser
});

在开发人员中，对话框正确显示

在生产过程中，对话框无法正确显示，它占用了页面的所有高度。

在进行迁移之前，如果没有“ height”配置，则对话框的高度将动态获取内容的高度。

现在，仅在prod模式下（并且仅在chrome中）必须配置height conf。

非常感谢您的帮助。

将Angular 5迁移到6，ng serve --prod添加了不同的CSS类mat-select和mat对话框

0 个答案: