Angular 14 到 Angular 17 迁移

Question

最近，我将 Angular 版本 14 升级到 17。升级到 17 后，我遇到了一些问题，例如安装 npm 模块后出现 node_modules 错误，这是意外的。请参阅下面的屏幕截图和我的 packaje.json。如果有人有任何建议，请随时在评论中提出。

这是我的package.json

"dependencies": {
    "@angular/animations": "~17.3.12",
    "@angular/cdk": "^16.2.14",
    "@angular/common": "~17.3.12",
    "@angular/compiler": "~17.3.12",
    "@angular/core": "~17.3.12",
    "@angular/forms": "~17.3.12",
    "@angular/localize": "~17.3.12",
    "@angular/platform-browser": "~17.3.12",
    "@angular/platform-browser-dynamic": "~17.3.12",
    "@angular/router": "~17.3.12",
    "@angular/service-worker": "~17.3.12",
    "@bartholomej/ngx-translate-extract": "^8.0.2",
    "@faker-js/faker": "^8.2.0",
    "@fortawesome/fontawesome-free": "^6.1.2",
    "@gloriousky/tailwindcss-localization": "^1.1.0",
    "@milkdown/core": "^7.3.0",
    "@milkdown/ctx": "^7.3.0",
    "@milkdown/plugin-history": "^7.3.0",
    "@milkdown/plugin-listener": "^7.3.0",
    "@milkdown/preset-commonmark": "^7.3.0",
    "@milkdown/prose": "^7.3.0",
    "@milkdown/theme-nord": "^7.3.0",
    "@milkdown/transformer": "^7.3.0",
    "@ngrx/effects": "^17.2.0",
    "@ngrx/entity": "^17.2.0",
    "@ngrx/router-store": "^17.2.0",
    "@ngrx/store": "^17.2.0",
    "@ngrx/store-devtools": "^17.2.0",
    "@ngx-formly/bootstrap": "^6.1.8",
    "@ngx-formly/core": "^6.1.8",
    "@ngx-translate/core": "^14.0.0",
    "@popperjs/core": "^2.11.0",
    "@types/video.js": "^7.3.53",
    "@uppy/angular": "^0.5.2",
    "@uppy/aws-s3": "^3.2.3",
    "@uppy/aws-s3-multipart": "^3.5.4",
    "@uppy/golden-retriever": "^3.1.0",
    "@uppy/image-editor": "^2.1.2",
    "@uppy/remote-sources": "^1.0.3",
    "angular-svg-icon": "^14.0.0",
    "animate.css": "^4.1.1",
    "chartjs-plugin-annotation": "^3.0.1",
    "chartjs-plugin-datalabels": "^2.2.0",
    "flowbite": "^2.5.1",
    "flowbite-datepicker": "^1.3.0",
    "i": "^0.3.7",
    "js-sha256": "^0.11.0",
    "lodash": "^4.17.20",
    "moment": "^2.29.4",
    "ng-circle-progress": "^1.7.1",
    "ng2-charts": "^4.1.1",
    "ngx-cookie-service": "^16.1.0",
    "ngx-markdown": "^17.2.1",
    "npm": "^9.8.1",
    "reconnecting-websocket": "^4.4.0",
    "remark-directive": "^3.0.0",
    "rxjs": "^7.5.0",
    "swiper": "^8.4.6",
    "tslib": "^2.3.0",
    "uuid": "^9.0.0",
    "video.js": "^8.5.2",
    "zone.js": "~0.14.10"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~17.3.9",
    "@angular-eslint/builder": "~17.5.3",
    "@angular-eslint/eslint-plugin": "~17.5.3",
    "@angular-eslint/eslint-plugin-template": "~17.5.3",
    "@angular-eslint/schematics": "~17.5.3",
    "@angular-eslint/template-parser": "~17.5.3",
    "@angular/cli": "~17.3.9",
    "@angular/compiler-cli": "~17.3.12",
    "@angular/language-service": "~17.3.12",
    "@biesbjerg/ngx-translate-extract": "^7.0.3",
    "@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
    .....

    enter code here
    "typescript": "~5.4.5"
  },
  "prettier": {
    "tabWidth": 2,
    "singleQuote": true,
    "overrides": [
      {
        "files": "*.scss",
        "options": {
          "singleQuote": false
        }
      }
    ]
  }

我删除了所有缓存并重新安装了依赖项很多次，但仍然可以看到这种不匹配。无法理解这些问题。

Answer 1

在 tsconfig 文件中，检查 TypeScript 将编译代码的 JavaScript 版本以及要使用的模块系统：

"module": "es2020",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "ES2022",

"module": "es2020"

：此选项指定 TypeScript 应使用 ECMAScript 2020 模块系统进行输出。这意味着编译后的 JavaScript 将使用模块的导入和导出语法，这是现代 JavaScript 环境中的标准模块系统。这适用于支持 ES 模块的环境，例如现代浏览器和 Node.js（具有适当的设置）。

"target": "ES2022"

：意味着输出 JavaScript 将使用 ES2022 中提供的功能，ES2022 是 JavaScript 的现代版本，包括顶级等待、逻辑赋值运算符等功能

进行任何必要的配置后，尝试删除node_modules文件夹，然后运行

npm install

或

yarn install.