css - 将 Angular 5 应用程序升级到 Angular 7 后，样式未从 styles.css 加载

Question

我已将 Angular 5 应用程序升级到 Angular 7，样式变得一团糟。当我检查控制台中的元素时，这些元素的样式不是从 styles.bundles.css 加载的。现在这些样式正在从 reboot.scss、site.scss 加载。但是在 Angular 5 应用程序中，这些样式是从 styles.bundles.css 加载的。

包.json:

{
  "name": "wigs",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod --output-hashing=none",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:dev": "ng build --extract-css=true --aot=true --build-optimizer=true --output-hashing=none"
  },
  "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/router": "7.2.11",
    "@ng-bootstrap/ng-bootstrap": "^4.2.2",
    "@progress/kendo-angular-buttons": "^4.3.3",
    "@progress/kendo-angular-dateinputs": "^3.7.1",
    "@progress/kendo-angular-dropdowns": "^3.5.2",
    "@progress/kendo-angular-excel-export": "^2.3.0",
    "@progress/kendo-angular-grid": "^3.13.1",
    "@progress/kendo-angular-inputs": "^4.2.0",
    "@progress/kendo-angular-intl": "^1.7.0",
    "@progress/kendo-angular-l10n": "^1.3.0",
    "@progress/kendo-data-query": "^1.5.1",
    "@progress/kendo-drawing": "^1.5.9",
    "@progress/kendo-theme-default": "^3.4.0",
    "angular-auth-oidc-client": "9.0.3",
    "angular-font-awesome": "^3.1.2",
    "bootstrap": "4.3.1",
    "core-js": "3.0.0",
    "css-vars-ponyfill": "^2.0.2",
    "font-awesome": "^4.7.0",
    "intl": "^1.2.5",
    "jquery": "^3.4.1",
    "ngx-bootstrap": "4.3.0",
    "node-sass": "4.10.0",
    "popper.js": "1.14.7",
    "primeicons": "1.0.0",
    "primeng": "7.1.0",
    "rxjs": "6.4.0",
    "rxjs-compat": "6.4.0",
    "rxjs-websockets": "6.0.4",
    "tslib": "^1.9.0",
    "web-animations-js": "2.3.1",
    "zone.js": "0.8.29"
  },
  "devDependencies": {
    "@angular/compiler-cli": "7.2.11",
    "@angular-devkit/build-angular": "~0.13.0",
    "typescript": "3.2.4",
    "@angular/cli": "7.3.7",
    "@angular/language-service": "7.2.11",
    "@types/jasmine": "3.3.11",
    "@types/jasminewd2": "2.0.6",
    "@types/node": "11.11.3",
    "codelyzer": "4.5.0",
    "jasmine-core": "3.3.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "4.0.1",
    "karma-chrome-launcher": "2.2.0",
    "karma-coverage-istanbul-reporter": "2.0.5",
    "karma-jasmine": "2.0.1",
    "karma-jasmine-html-reporter": "1.4.0",
    "protractor": "5.4.2",
    "ts-node": "8.0.3",
    "tslint": "5.14.0"
  }
}

angular.json:

"styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.scss",
              "node_modules/font-awesome/css/font-awesome.css"
            ],

Answer 1

Angular 不建议跨多个主要版本

不要直接更新 Angular 5 -> 7流程下面链接的步骤

https://update.angular.io/#5.0:7.0