css - Angular 7 升级后样式问题
问题描述
我们已经将我们的应用程序从Angular 5.2 升级到 7.2并且样式变得一团糟。某些元素(例如:图标和文本)之间的间距已更改、消失或减小。
在升级 Angular 应用程序或以下软件包后,你们中是否有人遇到过这样的问题?
我已经将所有可能的包恢复到它们的暂存版本,但这并没有解决问题。
我不知道从哪里开始进行故障排除以找到问题的根源。样式和 HTML 没有改变。
我们更新了:
- 引导程序:从 4.1.0 到 4.3.1
- @ng-bootstrap/ng-bootstrap:从 1.1.2 到 4.0.0
- ngx-bootstrap:从 2.0.5 到 4.0.0
package.json看起来像这样:
{
"private": true,
"dependencies": {
"@angular/animations": "7.2.11",
"@angular/common": "7.2.11",
"@angular/compiler": "7.2.11",
"@angular/core": "7.2.11",
"@angular/forms": "7.2.11",
"@angular/http": "7.2.11",
"@angular/platform-browser": "7.2.11",
"@angular/platform-browser-dynamic": "7.2.11",
"@angular/platform-server": "7.2.11",
"@angular/router": "7.2.11",
"@fortawesome/angular-fontawesome": "0.3.0",
"@fortawesome/fontawesome-svg-core": "1.2.12",
"@fortawesome/free-solid-svg-icons": "5.6.3",
"@ng-bootstrap/ng-bootstrap": "4.0.0",
"@nguniversal/express-engine": "7.1.1",
"@ngx-translate/core": "11.0.1",
"@ngx-translate/http-loader": "4.0.0",
"acorn": "6.1.1",
"angular2-image-zoom": "1.2.1",
"bootstrap": "4.3.1",
"braintree-web-drop-in": "1.16.0",
"core-js": "2.6.5",
"file-saver": "2.0.1",
"font-awesome": "4.7.0",
"htmllint": "0.7.3",
"intl": "1.2.5",
"jquery": "3.3.1",
"ng-jhipster": "0.9.3",
"ng-recaptcha": "4.2.1",
"ng2-order-pipe": "0.1.5",
"ngx-bootstrap": "4.0.0",
"ngx-color-picker": "7.4.0",
"ngx-cookie": "4.1.2",
"ngx-webstorage": "3.0.2",
"popper.js": "1.14.7",
"print-js": "1.0.54",
"rxjs": "6.4.0",
"rxjs-compat": "6.4.0",
"tslib": "1.9.3",
"zone.js": "0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "0.13.7",
"@angular/cli": "7.3.7",
"@angular/compiler-cli": "7.2.11",
"@angular/language-service": "7.2.11",
"@types/file-saver": "2.0.0",
"@types/hammerjs": "2.0.36",
"@types/jasmine": "3.3.12",
"@types/jasminewd2": "2.0.6",
"@types/node": "11.12.0",
"codelyzer": "5.0.0",
"jasmine-core": "3.3.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "4.0.1",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "2.0.0",
"karma-coverage-istanbul-reporter": "2.0.5",
"karma-jasmine": "2.0.1",
"karma-jasmine-html-reporter": "1.4.0",
"node-sass": "4.11.0",
"protractor": "6.0.0",
"sort-json": "2.0.0",
"ts-node": "8.0.3",
"tslint": "5.14.0",
"typescript": "3.2.4"
}
}
解决方案
我相信从 Angular 6 开始,该preserveWhitespace
选项默认为 false。要在全局范围内再次打开它,您可以在以下位置添加一个选项tsconfig.app.json
:
"angularCompilerOptions": {
"preserveWhitespaces": true
}
ngPreserveWhitspaces
或者,您可以在需要保留空格的任何元素上使用该指令。
有关它的一些(相当隐藏的)文档,请参见此处。
推荐阅读
- ms-access - MS Access - 在表单之间传递登录信息
- c# - 如何在 Windows 窗体应用程序 C# 中检索 Google 联系人?
- database - 如何每天存储和索引数十亿条日志
- amazon-web-services - Kinesis Firehose 数据传输延迟
- gradle - Doop:Gradle 构建失败并出现异常。无法解决依赖关系
- c# - C# SQL Server 存储过程参数返回列表
- c# - SafeArray 无法封送为此数组类型,因为它具有非零下限或多于一维
- firebase - 如何找到属于 Firebase 应用程序的用户?
- typescript - 打字稿中的 Getter/Setter
- grep - 使用 grep -E 查找以 S 开头但不包括他们的人们的姓氏是他们的名字以 S 开头