Проблема стиля 7 после обновления - PullRequest
Новая
       15

Проблема стиля 7 после обновления

1 голос
/ 04 апреля 2019

Мы обновили наше приложение с Angular 5.2 до 7,2 , и стиль был испорчен.Интервал между некоторыми элементами (например, значками и текстом) изменился, исчез или уменьшился.

Кто-нибудь из вас сталкивался с такой проблемой после обновления приложения Angular или следующих пакетов?

Я уже вернул все возможные пакеты к их промежуточным версиям, но это не решило проблему.

Я понятия не имею, с чего начать устранение неполадок, чтобы найти источник проблемы. Стиль и HTML не изменились.

Мы обновили:

  • Bootstrap: с 4.1.0 до 4.3.1
  • @ ng-bootstrap / ng-bootstrap: от 1.1.2 до 4.0.0
  • ngx-bootstrap: от 2.0.5 до 4.0.0

Стиль от глобального angular.json : enter image description here

Куда мы импортируем используемые компоненты Bootstrap: enter image description here

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

1 Ответ

3 голосов
/ 04 апреля 2019

Я полагаю, что из Angular 6 опция preserveWhitespace по умолчанию имеет значение false.Чтобы снова включить его глобально, вы можете добавить опцию в tsconfig.app.json: 

"angularCompilerOptions": {
  "preserveWhitespaces": true
}

. Или вы можете использовать директиву ngPreserveWhitspaces для любых элементов, где вам нужно сохранить пробелы.

См. здесь для некоторой (довольно скрытой) документации по ней.

...