Angular 7 post-upgrade styling issue - css

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

Answer 1

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.