Angular 7 post-upgrade styling issue

Question

We've upgraded our application from Angular 5.2 to 7.2 and the styling got messed up. The spacing between some elements (for example: icons and text) has changed, disappeared or decreased.

Have any of you encountered an issue like this after upgrading an Angular application or the following packages?

I already reverted back every possible package to their staging versions, but it didn't solve the problem.

I have no idea where to start the troubleshooting to find the source of the problem. The styling and the HTML haven't been changed.

We updated:

Bootstrap: from 4.1.0 to 4.3.1
@ng-bootstrap/ng-bootstrap: from 1.1.2 to 4.0.0
ngx-bootstrap: from 2.0.5 to 4.0.0

The styling is global from the angular.json:

Where we import the used Bootstrap components:

The package.json look like this:

{
  "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"
  }
}

You'll have to provide more details. How are you doing the styling? Globally? In the Component decorator with `styles:[]` or through `styleUrls:[]`, etc — peinearydevelopment, Apr 04 '19 at 14:03
Have you tried to clear browser cache? and when upgrading and open inspect element, Did you notice any changes? — Kenana Reda, Apr 04 '19 at 14:04
Are you using ng-deep in your styles? https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep - I didn't think this was removed in 7 but thought I'd flag this — danday74, Apr 04 '19 at 14:04

score 5 · Accepted Answer · answered Apr 04 '19 at 14:15

5

I believe from Angular 6 the preserveWhitespace option is false by default. To turn it on again globally you can add an option in tsconfig.app.json:

"angularCompilerOptions": {
  "preserveWhitespaces": true
}

Or you can use the directive ngPreserveWhitspaces on any elements where you need the whitespace to be preserved.

See here for some (quite hidden) documentation on it.

answered Apr 04 '19 at 14:15

Mike Jerred

9,551
5
22
42

You led me to the answer, which was this one, but I accept it and left this comment, because your answer is still good for another cases: https://stackoverflow.com/questions/46018599/how-to-globally-set-the-preservewhitespaces-option-in-angular-to-false – Patrik Alexits Apr 04 '19 at 14:20

Angular 7 post-upgrade styling issue

1 Answers1