Typescript version mismatch with nx monorepo (NestJS + Angular)

Question

I am new to angular and nestjs, even more new to nx monorepos. Currently, I am trying to follow this tutorial. Basically, it starts with a nx project setup with nest:

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

followed by a quick test:

nx serve server

and the server runs successfully.

Then the angular application is created:

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

but then when I try to run this:

nx serve client

I get this following error:

nx run client:serve:development

Browser application bundle generation complete.

Initial Chunk Files | Names | Raw Size polyfills.js | polyfills | 333.01 kB | styles.css, styles.js | styles | 231.18 kB | vendor.js | vendor | 229.06 kB | runtime.js | runtime | 6.51 kB | main.js | main | 829 bytes |

Initial Total | 800.57 kB

Build at: 2023-11-21T01:25:27.560Z - Hash: de753cf88645d02c - Time: 3134ms

./apps/client/src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js): Error: Emit attempted before Angular Webpack plugin initialization.

Error: Failed to initialize Angular compilation - The Angular Compiler requires TypeScript >=5.2.0 and <5.3.0 but 5.1.6 was found instead.

I realized that the nest requires an earlier version of TypeScript than the angular. How can one deal with such situations? Should I provide different (if possible) different TS versions to different components? Or should I downgrade Angular (how?) to match nestJS TypeScript version? Or is it a bug?

The tutorial has a release tag and a repo on github, which runs fine and has no compilation issues. Also I tried to fix the package.json file by changing the line with: "typescript": "~5.1.3" to "typescript": "~5.3.0". This cause more issues with npm install.

PS: I am realizing now my mistake. I should have gone with 5.2.x from the beginning (even though that also failed).

My package.json looks like this:

{
  "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"
  }
}

After changing to "typescript": "~5.2.2", I am still receiving errors.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @nx/angular@17.0.3
npm ERR! Found: @angular-devkit/build-angular@17.0.2
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 jest-preset-angular@13.1.4
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/angular@17.0.3
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/angular@17.0.3
npm ERR!   node_modules/@nrwl/angular
npm ERR!     @nrwl/angular@"17.0.3" from @nx/angular@17.0.3
npm ERR! 
npm ERR! Conflicting peer dependency: @angular-devkit/build-angular@16.2.10
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR!   peer @angular-devkit/build-angular@">= 14.0.0 < 17.0.0" from @nx/angular@17.0.3
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/angular@17.0.3
npm ERR!     node_modules/@nrwl/angular
npm ERR!       @nrwl/angular@"17.0.3" from @nx/angular@17.0.3
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.

Typescript version mismatch with nx monorepo (NestJS + Angular)

Answers (1)

Related Questions