Typescript 版本与 nx monorepo（NestJS + Angular）不匹配

问题描述 投票：0回答：1

我对 Angular 和 NestJS 很陌生，对 nx monorepos 更陌生。目前，我正在尝试遵循这个教程。 基本上，它从带有 Nest 的 nx 项目设置开始：

npx create-nx-workspace@latest --preset nest \
--name full-stack-todo \
--appName server \
--nxCloud true

随后进行快速测试：

nx serve server

服务器运行成功。

然后创建角度应用程序：

npx nx generate @nx/angular:application --name=client --routing=true --standalone=true --backendProject=server --prefix=fse --style=scss --tags="type:app, scope:client" --standaloneConfig

但是当我尝试运行这个时：

nx serve client

我收到以下错误：

nx 运行客户端：服务：开发

浏览器应用程序包生成完成。

初始块文件|姓名 |原始尺寸 polyfills.js |填充剂 | 333.01 kB | 样式.css、样式.js |款式 | 231.18 kB | 供应商.js |供应商 | 229.06 kB | 运行时.js |运行时| 6.51 KB | 主.js |主要| 829 字节 |

初始总计 | 800.57 kB

构建于：2023-11-21T01：25：27.560Z - 哈希：de753cf88645d02c - 时间：3134ms

./apps/client/src/main.ts - 错误：模块构建失败（来自 ./node_modules/@ngtools/webpack/src/ivy/index.js）： 错误：在 Angular Webpack 插件初始化之前尝试发出。

错误：无法初始化 Angular 编译 - Angular 编译器需要 TypeScript >=5.2.0 且 <5.3.0 but 5.1.6 was found instead.

我意识到 Nest 需要比 Angular 更早版本的 TypeScript。面对这样的情况，我们该如何应对呢？我应该为不同的组件提供不同的（如果可能的话）不同的 TS 版本吗？或者我应该降级 Angular （如何？）以匹配 NestJS TypeScript 版本？ 还是bug？

该教程在 github 上有发布标签和存储库，运行良好并且没有编译问题。 我还尝试通过更改以下行来修复 package.json 文件： 

"typescript": "~5.1.3"
至 
"typescript": "~5.3.0"
。这会导致更多问题 
npm install
。

PS：我现在意识到我的错误了。我应该从一开始就选择 5.2.x（尽管也失败了）。

我的 package.json 看起来像这样：

{
  "name": "@myproject/source",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {},
  "private": true,
  "dependencies": {
    "@angular/animations": "~17.0.0",
    "@angular/common": "~17.0.0",
    "@angular/compiler": "~17.0.0",
    "@angular/core": "~17.0.0",
    "@angular/forms": "~17.0.0",
    "@angular/platform-browser": "~17.0.0",
    "@angular/platform-browser-dynamic": "~17.0.0",
    "@angular/router": "~17.0.0",
    "@nestjs/common": "^10.0.2",
    "@nestjs/core": "^10.0.2",
    "@nestjs/platform-express": "^10.0.2",
    "axios": "^1.0.0",
    "reflect-metadata": "^0.1.13",
    "rxjs": "^7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~17.0.0",
    "@angular-devkit/core": "~17.0.0",
    "@angular-devkit/schematics": "~17.0.0",
    "@angular-eslint/eslint-plugin": "~17.0.0",
    "@angular-eslint/eslint-plugin-template": "~17.0.0",
    "@angular-eslint/template-parser": "~17.0.0",
    "@angular/cli": "~17.0.0",
    "@angular/compiler-cli": "~17.0.0",
    "@angular/language-service": "~17.0.0",
    "@nestjs/schematics": "^10.0.1",
    "@nestjs/testing": "^10.0.2",
    "@nx/angular": "^17.0.3",
    "@nx/cypress": "17.1.3",
    "@nx/eslint": "17.0.3",
    "@nx/eslint-plugin": "17.0.3",
    "@nx/jest": "17.1.3",
    "@nx/js": "17.1.3",
    "@nx/nest": "17.0.3",
    "@nx/node": "17.0.3",
    "@nx/web": "17.1.3",
    "@nx/webpack": "17.0.3",
    "@nx/workspace": "17.0.3",
    "@schematics/angular": "~17.0.0",
    "@swc-node/register": "~1.6.7",
    "@swc/core": "~1.3.85",
    "@types/jest": "^29.4.0",
    "@types/node": "~18.7.1",
    "@typescript-eslint/eslint-plugin": "^5.60.1",
    "@typescript-eslint/parser": "^5.60.1",
    "cypress": "^13.0.0",
    "eslint": "~8.46.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-cypress": "^2.13.4",
    "jest": "^29.4.1",
    "jest-environment-jsdom": "^29.4.1",
    "jest-environment-node": "^29.4.1",
    "jest-preset-angular": "~13.1.4",
    "jsonc-eslint-parser": "^2.1.0",
    "nx": "17.0.3",
    "prettier": "^2.6.2",
    "ts-jest": "^29.1.0",
    "ts-node": "10.9.1",
    "typescript": "~5.1.3"
  }
}

更改为

"typescript": "~5.2.2"
后，我仍然收到错误。

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @nx/[email protected]
npm ERR! Found: @angular-devkit/[email protected]
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   dev @angular-devkit/build-angular@"~17.0.0" from the root project
npm ERR!   peer @angular-devkit/build-angular@">=13.0.0 <18.0.0" from [email protected]
npm ERR!   node_modules/jest-preset-angular
npm ERR!     dev jest-preset-angular@"~13.1.4" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular-devkit/build-angular@">= 14.0.0 < 17.0.0" from @nx/[email protected]
npm ERR! node_modules/@nx/angular
npm ERR!   dev @nx/angular@"^17.0.3" from the root project
npm ERR!   @nx/angular@"17.0.3" from @nrwl/[email protected]
npm ERR!   node_modules/@nrwl/angular
npm ERR!     @nrwl/angular@"17.0.3" from @nx/[email protected]
npm ERR! 
npm ERR! Conflicting peer dependency: @angular-devkit/[email protected]
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   peer @angular-devkit/build-angular@">= 14.0.0 < 17.0.0" from @nx/[email protected]
npm ERR!   node_modules/@nx/angular
npm ERR!     dev @nx/angular@"^17.0.3" from the root project
npm ERR!     @nx/angular@"17.0.3" from @nrwl/[email protected]
npm ERR!     node_modules/@nrwl/angular
npm ERR!       @nrwl/angular@"17.0.3" from @nx/[email protected]
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
angular dependencies nestjs monorepo nrwl-nx
1个回答
0
投票

我能够使用这个 package.json 运行

{
  "name": "@full-stack-todo/source",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {},
  "private": true,
  "dependencies": {
    "@angular/animations": "~17.0.0",
    "@angular/common": "~17.0.0",
    "@angular/compiler": "~17.0.0",
    "@angular/core": "~17.0.0",
    "@angular/forms": "~17.0.0",
    "@angular/platform-browser": "~17.0.0",
    "@angular/platform-browser-dynamic": "~17.0.0",
    "@angular/router": "~17.0.0",
    "@nestjs/common": "^10.0.2",
    "@nestjs/core": "^10.0.2",
    "@nestjs/platform-express": "^10.0.2",
    "axios": "^1.0.0",
    "reflect-metadata": "^0.1.13",
    "rxjs": "^7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~17.0.0",
    "@angular-devkit/core": "~17.0.0",
    "@angular-devkit/schematics": "~17.0.0",
    "@angular-eslint/eslint-plugin": "~17.0.0",
    "@angular-eslint/eslint-plugin-template": "~17.0.0",
    "@angular-eslint/template-parser": "~17.0.0",
    "@angular/cli": "~17.0.0",
    "@angular/compiler-cli": "~17.0.0",
    "@angular/language-service": "~17.0.0",
    "@nestjs/schematics": "^10.0.1",
    "@nestjs/testing": "^10.0.2",
    "@nx/angular": "17.1.3",
    "@nx/eslint": "17.1.3",
    "@nx/eslint-plugin": "17.1.3",
    "@nx/jest": "17.1.3",
    "@nx/js": "17.1.3",
    "@nx/nest": "17.1.3",
    "@nx/node": "17.1.3",
    "@nx/webpack": "17.1.3",
    "@nx/workspace": "17.1.3",
    "@schematics/angular": "~17.0.0",
    "@swc-node/register": "~1.6.7",
    "@swc/core": "~1.3.85",
    "@types/jest": "^29.4.0",
    "@types/node": "~18.7.1",
    "@typescript-eslint/eslint-plugin": "^6.9.1",
    "@typescript-eslint/parser": "^6.9.1",
    "eslint": "~8.46.0",
    "eslint-config-prettier": "^9.0.0",
    "jest": "^29.4.1",
    "jest-environment-jsdom": "^29.4.1",
    "jest-environment-node": "^29.4.1",
    "jest-preset-angular": "~13.1.4",
    "jsonc-eslint-parser": "^2.1.0",
    "nx": "17.1.3",
    "prettier": "^2.6.2",
    "ts-jest": "^29.1.0",
    "ts-node": "10.9.1",
    "typescript": "~5.2.2"
  }
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.