angular - 从 Angular 8 升级到 9 后出现构建错误

Question

我有一个托管在 .net core 3.1 应用程序中的 Angular 应用程序。我按照官方指南从 8 升级到 9，现在我的应用程序无法构建。我收到以下错误:

"Module not found: Error: Can't resolve '@angular/cdk/layout/breakpoints'", "Field 'browser' doesn't contain a valid alias configuration resolve as module looking for modules in No description file found Field 'browser' doesn't contain a valid alias configuration No description file found no extension Field 'browser' doesn't contain a valid alias configuration /@angular/cdk/layout/breakpoints doesn't exist .ts"

对于 @angular/material/core/common-behaviors、@angular/material/core/datetime 和 @angular，我得到了同样的错误/material/core/ripple.

我已经包含了所有我认为可能有用的文件。多年来，我一直在努力解决这个问题，但我的想法已经用完了。这非常令人沮丧，请帮忙。

包.json:

{
  "name": "myapp",
  "private": true,
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --live-reload=false",
    "build": "ng build",
    "build:ssr": "ng run MIC:server:dev",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "eslint": "eslint src/**/*.ts",
    "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
  },
  "postcss": {},
  "dependencies": {
    "@angular/animations": "9.0.0",
    "@angular/cdk": "^9.0.0",
    "@angular/common": "9.0.0",
    "@angular/compiler": "9.0.0",
    "@angular/core": "9.0.0",
    "@angular/flex-layout": "9.0.0-beta.29",
    "@angular/forms": "9.0.0",
    "@angular/material": "9.0.0",
    "@angular/material-moment-adapter": "^9.0.0",
    "@angular/platform-browser": "9.0.0",
    "@angular/platform-browser-dynamic": "9.0.0",
    "@angular/platform-server": "9.0.0",
    "@angular/router": "9.0.0",
    "@fortawesome/angular-fontawesome": "0.6.0",
    "@fortawesome/fontawesome-svg-core": "1.2.27",
    "@fortawesome/free-regular-svg-icons": "5.12.1",
    "@fortawesome/free-solid-svg-icons": "5.12.1",
    "@microsoft/signalr": "3.1.0",
    "@microsoft/signalr-protocol-msgpack": "3.1.0",
    "@ng-bootstrap/ng-bootstrap": "^5.2.1",
    "@ng-select/ng-select": "^3.7.2",
    "@nguniversal/module-map-ngfactory-loader": "9.0.0-next.1",
    "@popperjs/core": "2.0.5",
    "@swimlane/ngx-charts": "13.0.2",
    "angular-dual-listbox": "5.0.1",
    "angular2-notifications": "3.0.0",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "4.4.1",
    "classlist.js": "1.1.20150312",
    "core-js": "3.6.4",
    "date-fns": "2.9.0",
    "hammer-timejs": "1.1.0",
    "hammerjs": "2.0.8",
    "hash-sum": "2.0.0",
    "immutable": "3.8.2",
    "intl": "1.2.5",
    "jquery": "3.4.1",
    "jwt-decode": "2.2.0",
    "material-design-icons": "3.0.1",
    "moment": "^2.24.0",
    "ng-validator": "2.0.0",
    "ngx-material-timepicker": "5.3.0",
    "oidc-client": "1.10.1",
    "primeicons": "2.0.0",
    "primeng-lts": "8.1.4",
    "rxjs": "6.5.4",
    "tippy.js": "5.2.0",
    "web-animations-js": "2.3.2",
    "zone.js": "0.10.2"
  },
  "devDependencies":
  {
    "@angular-devkit/build-angular": "^0.900.1",
    "@angular-devkit/core": "9.0.1",
    "@angular-eslint/builder": "0.0.1-alpha.18",
    "@angular-eslint/eslint-plugin": "0.0.1-alpha.18",
    "@angular-eslint/eslint-plugin-template": "0.0.1-alpha.18",
    "@angular-eslint/template-parser": "0.0.1-alpha.18",
    "@angular/cli": "^9.0.1",
    "@angular/compiler-cli": "9.0.0",
    "@angular/language-service": "9.0.0",
    "@intervolga/optimize-cssnano-plugin": "1.0.6",
    "@types/jasmine": "3.5.3",
    "@types/jasminewd2": "2.0.8",
    "@types/jwt-decode": "2.2.1",
    "@types/node": "13.7.0",
    "@typescript-eslint/eslint-plugin": "2.19.0",
    "@typescript-eslint/eslint-plugin-tslint": "2.19.0",
    "@typescript-eslint/parser": "2.19.0",
    "autoprefixer": "9.7.4",
    "codelyzer": "5.2.1",
    "eslint": "^6.8.0",
    "jasmine-core": "3.5.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "4.4.1",
    "karma-chrome-launcher": "3.1.0",
    "karma-coverage-istanbul-reporter": "2.1.1",
    "karma-jasmine": "3.1.0",
    "karma-jasmine-html-reporter": "1.5.2",
    "karma-scss-preprocessor": "4.0.0",
    "typescript": "3.7.5"
  },
  "optionalDependencies": {
    "node-sass": "4.13.1",
    "protractor": "6.0.0",
    "ts-node": "8.6.2"
  }
}

angular.json:

{
  "$schema": "node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
"myapp": {
  "root": "",
  "sourceRoot": "src",
  "projectType": "application",
  "prefix": "app",
  "schematics": {},
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "progress": true,
        "verbose": false,
        "extractCss": true,
        "outputPath": "dist",
        "index": "src/index.html",
        "main": "src/main.browser.ts",
        "polyfills": "src/polyfills/browser.polyfills.ts",
        "tsConfig": "src/tsconfig.app.json",
        "assets": [
          "src/assets",
          "src/favicon.ico"
        ],
        "styles":
        [
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/@ng-select/ng-select/themes/default.theme.css",
          "node_modules/primeicons/primeicons.css",
          "node_modules/primeng-lts/resources/themes/nova-light/theme.css",
          "node_modules/primeng-lts/resources/primeng.css",
          "node_modules/tippy.js/dist/backdrop.css",
          "node_modules/tippy.js/dist/svg-arrow.css",
          "node_modules/tippy.js/dist/tippy.css",
          "src/myapp-theme.scss",
          "src/styles.scss"
        ],
        "scripts": []
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true
        }
      }
    },
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "myapp:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "myapp:build:production"
        }
      }
    },
    "extract-i18n": {
      "builder": "@angular-devkit/build-angular:extract-i18n",
      "options": {
        "browserTarget": "myapp:build"
      }
    },
    "test": {
      "builder": "@angular-devkit/build-angular:karma",
      "options": {
        "main": "src/test.ts",
        "polyfills": "src/polyfills/browser.polyfills.ts",
        "tsConfig": "src/tsconfig.spec.json",
        "karmaConfig": "src/karma.conf.js",
        "styles": [
          "src/myapp-theme.scss",
          "src/styles.scss"
        ],
        "scripts": [],
        "assets": [
          "src/assets",
          "src/favicon.ico"
        ]
      }
    },
    "lint": {
      "builder": "@angular-devkit/build-angular:tslint",
      "options": {
        "tsConfig": [
          "src/tsconfig.app.json",
          "src/tsconfig.spec.json"
        ],
        "exclude": [
          "**/node_modules/**"
        ]
      }
    },
    "server": {
      "builder": "@angular-devkit/build-angular:server",
      "options": {
        "outputPath": "dist-server",
        "main": "src/main.server.ts",
        "tsConfig": "src/tsconfig.server.json"
      },
      "configurations": {
        "dev": {
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "namedChunks": false,
          "extractLicenses": true,
          "vendorChunk": true
        },
        "production": {
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "namedChunks": false,
          "extractLicenses": true,
          "vendorChunk": false
        }
      }
    }
  }
},
"myapp-e2e": {
  "root": "e2e/",
  "projectType": "application",
  "architect": {
    "e2e": {
      "builder": "@angular-devkit/build-angular:protractor",
      "options": {
        "protractorConfig": "e2e/protractor.conf.js",
        "devServerTarget": "myapp:serve"
      }
    },
    "lint": {
      "builder": "@angular-devkit/build-angular:tslint",
      "options": {
        "tsConfig": "e2e/tsconfig.e2e.json",
        "exclude": [
          "**/node_modules/**"
        ]
      }
    }
  }
}
  },
  "defaultProject": "myapp",
  "schematics": {
"@schematics/angular:component": {
  "style": "scss"
}
  }
}

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions":
  {
    "baseUrl": "/",
    "module": "esnext",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "skipDefaultLibCheck": true,
    "strict": true,
    "strictNullChecks": false,
    "strictPropertyInitialization": false,
    "target": "es2015",
    "typeRoots":
    [
      "node_modules/@types",
      "app_typings",
      "src/types"
    ],
    "lib":
    [
      "es2018",
      "dom"
    ],
    "types":
    [
      //"webpack-env"

    ],
    "suppressImplicitAnyIndexErrors": true
  },
  "angularCompilerOptions":
  {
    //"fullTemplateTypeCheck": true,
    //"strictInjectionParameters": true,
    //"enableIvy": false
    "fullTemplateTypeCheck": false,
    "strictTemplates": false
  },
  "exclude":
  [
    "bin",
    "node_modules"
  ],
  "atom":
  {
    "rewriteTsconfig": false
  }
}

Answer 1

试试看:

• 回滚所有更改
• 删除 node_modules 文件夹
• npm i/yarn
• npm install @angular/cli -g
• ng update @angular/cli @angular/core --force
• ng update --all --force

if you have angular material add @angular/material to the last command
if you want to see changes via git commits add --create-commits