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

3
我有一个Angular应用程序,它托管在.net core 3.1应用程序中。我按照官方指南从8升级到9,现在我的应用程序无法构建。我得到了以下错误:
“找不到模块:错误:无法解析'@angular/cdk/layout/breakpoints'”,“字段'browser'不包含有效的别名配置,将模块解析为没有说明文件的模块 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,我也遇到了同样的错误。
我已经包括了我认为可能有用的所有文件。我一直在努力修复这个问题,但是已经无计可施了。这非常令人沮丧,请帮忙。

package.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
  }
}


你是如何从v8升级到v9的?你使用了 ng update 吗? - angularrocks.com
是的,我尝试过 ng update 和 ng update --force。 - LanceM
可能没有太大帮助,但我忘记这个错误是什么了。如果您像这样导入日期时间:import { datetime } from '@angular/material',那么您需要更改为使用完整路径 import {datetime } from '@angular/material/core/datetime' - Kevin
2个回答

1

请尝试以下步骤:

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

如果您有Angular Material,请将@angular/material添加到最后一个命令中
如果您想通过git提交查看更改,请添加--create-commits


1

如果你遇到以下错误:

Angular编译器需要TypeScript版本大于等于3.6.4并且小于3.9.0,但实际上发现的是3.9.5版本。

请尝试运行以下命令:

npm i typescript@3.8


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接