npx nx migrate latest is not updating angular dependencies

[iKrishnaSahu]

Current Behavior

npx nx migrate latest is not updating angular dependencies

In previous version of nx, npx nx migrate latest used to update angular dependencies as well.

package.json (after running npx nx migrate latest)

{
  "name": "test-ws1-nx14510",
  "version": "0.0.0",
  "license": "SEE LICENSE IN LICENSE",
  "scripts": {
    "ng": "nx",
    "postinstall": "node ./decorate-angular-cli.js && ngcc --properties es2020 browser module main",
    "start": "nx serve",
    "build": "nx build",
    "test": "nx test"
  },
  "private": true,
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.4",
    "@angular-eslint/eslint-plugin": "16.0.2",
    "@angular-eslint/eslint-plugin-template": "16.0.2",
    "@angular-eslint/template-parser": "16.0.2",
    "@angular/cli": "^15.0.4",
    "@angular/compiler-cli": "^15.0.4",
    "@angular/language-service": "15.0.4",
    "@nrwl/angular": "16.2.1",
    "@nrwl/cli": "15.2.1",
    "@nrwl/cypress": "16.2.1",
    "@nrwl/eslint-plugin-nx": "16.2.1",
    "@nrwl/jest": "16.2.1",
    "@nrwl/linter": "16.2.1",
    "@nrwl/tao": "16.2.1",
    "@nrwl/workspace": "16.2.1",
    "@demo/schematics": "^5.9.0",
    "@demo/wrench": "next",
    "@types/jest": "29.4.4",
    "@types/node": "16.11.7",
    "@typescript-eslint/eslint-plugin": "5.58.0",
    "@typescript-eslint/parser": "5.58.0",
    "cypress": "^11.0.0",
    "eslint": "~8.15.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "jest": "29.4.3",
    "jest-environment-jsdom": "29.4.3",
    "jest-preset-angular": "13.1.1",
    "nx": "16.2.1",
    "prettier": "^2.6.2",
    "ts-jest": "29.1.0",
    "ts-node": "10.9.1",
    "typescript": "5.0.4"
  },
  "dependencies": {
    "@angular/animations": "^15.0.4",
    "@angular/cdk": "^15.0.3",
    "@angular/common": "^15.0.4",
    "@angular/compiler": "^15.0.4",
    "@angular/core": "^15.0.4",
    "@angular/flex-layout": "^14.0.0-beta.40",
    "@angular/forms": "^15.0.4",
    "@angular/material": "^15.0.3",
    "@angular/platform-browser": "^15.0.4",
    "@angular/platform-browser-dynamic": "^15.0.4",
    "@angular/router": "^15.0.4",
    "@demo/fis-ux-assets": "^4.25.0",
    "@demo/material": "^16.3.0",
    "@demo/prebuilt-themes": "~5.9.0",
    "@demo/shell": "~5.9.0",
    "@demo/theming": "~5.9.0",
    "rxjs": "^7.4.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  }
}

Expected Behavior

It should update angular dependencies

GitHub Repo

No response

Steps to Reproduce

1. Run npx nx migrate latest in existing angular based nx monorepo

Nx Report

C:\Projects\projects\workspaces2\5.9\test-ws1-nx14510>npx nx report

 >  NX   Report complete - copy this into the issue template

   Node   : 16.19.1
   OS     : win32 x64
   npm    : 8.19.3
   Hasher : Native

   nx                 : 16.2.1
   @nx/js             : 16.2.1
   @nx/jest           : 16.2.1
   @nx/linter         : 16.2.1
   @nx/workspace      : 16.2.1
   @nx/angular        : 16.2.1
   @nx/cypress        : 16.2.1
   @nx/devkit         : 16.2.1
   @nrwl/devkit       : 15.2.4
   @nx/eslint-plugin  : 16.2.1
   @nrwl/storybook    : 15.2.4
   @nrwl/tao          : 16.2.1
   @nx/webpack        : 16.2.1
   typescript         : 5.0.4
   ---------------------------------------
   Community plugins:
   @demo/schematics : 5.9.0
   @demo/shell      : 5.9.0
   ---------------------------------------
   The following packages should match the installed version of nx
     - @nrwl/devkit@15.2.4
     - @nrwl/storybook@15.2.4

   To fix this, run `nx migrate nx@16.2.1`


C:\Projects\projects\workspaces2\5.9\test-ws1-nx14510>

Failure Logs

No response

Operating System

• Windows

Additional Information

Is this an intentional change?
If yes, is this documented somewhere?

[Coly010]

Have you tried

nx migrate latest --from=nx@15.2.1 <- replace this with the version you were on previously

[iKrishnaSahu]

Have you tried

nx migrate latest --from=nx@15.2.1 <- replace this with the version you were on previously

@Coly010 same result with the mentioned command. It is not updating angular dependencies.

C:\Projects\projects\workspaces2\5.9\test-ws1-nx1521>npx nx migrate latest --from=nx@15.2.1
√ Enable distributed caching to make your CI faster? · No
Fetching meta data about packages.
It may take a few minutes.
Fetching nx@16.2.1
Fetching nx@16.2.1
Fetching @nrwl/linter@16.2.1
Fetching @nrwl/jest@16.2.1
Fetching @nrwl/cypress@16.2.1
Fetching @nrwl/angular@16.2.1
Fetching @nrwl/workspace@16.2.1
Fetching @nrwl/eslint-plugin-nx@16.2.1
Fetching @nrwl/linter@16.2.1
Fetching @nrwl/jest@16.2.1
Fetching @nrwl/cypress@16.2.1
Fetching @nrwl/angular@16.2.1
Fetching @nrwl/workspace@16.2.1
Fetching @nrwl/eslint-plugin-nx@16.2.1

 >  NX   The migrate command has run successfully.

   - package.json has been updated.
   - migrations.json has been generated.


 >  NX   Next steps:

   - Make sure package.json changes make sense and then run 'npm install',
   - Run 'npx nx migrate --run-migrations'
   - To learn more go to https://nx.dev/core-features/automate-updating-dependencies
   - You may run 'npm run nx -- connect-to-nx-cloud' to get faster builds, GitHub integration, and more. Check out https://nx.app


C:\Projects\projects\workspaces2\5.9\test-ws1-nx1521>

[Coly010]

It says your package.json has been updated, can you show the changes it added to package.json?

[iKrishnaSahu]

It says your package.json has been updated, can you show the changes it added to package.json?

Updated package.json -

{
  "name": "test-ws1-nx1521",
  "version": "0.0.0",
  "license": "SEE LICENSE IN LICENSE",
  "scripts": {
    "start": "nx serve",
    "build": "nx build",
    "test": "nx test",
    "compile-scss": "node tools/scripts/compile-scss.js --source themes --dest dist",
    "build:theme": "nx run themes:build",
    "pkg:mylib2": "nx build --project mylib2",
    "build:libs": "npm-run-all pkg:mylib2"
  },
  "private": true,
  "devDependencies": {
    "@angular-devkit/build-angular": "~15.0.0",
    "@angular-eslint/eslint-plugin": "16.0.2",
    "@angular-eslint/eslint-plugin-template": "16.0.2",
    "@angular-eslint/template-parser": "16.0.2",
    "@angular/cli": "~15.0.0",
    "@angular/compiler-cli": "~15.0.0",
    "@angular/language-service": "~15.0.0",
    "@nrwl/angular": "16.2.1",
    "@nrwl/cli": "15.2.1",
    "@nrwl/cypress": "16.2.1",
    "@nrwl/eslint-plugin-nx": "16.2.1",
    "@nrwl/jest": "16.2.1",
    "@nrwl/linter": "16.2.1",
    "@nrwl/tao": "16.2.1",
    "@nrwl/workspace": "16.2.1",
    "@demo/dev-platform": "^2.0.6",
    "@demo/schematics": "~5.9.0",
    "@demo/wrench": "next",
    "@types/angular": "^1.8.4",
    "@types/jest": "29.4.4",
    "@types/node": "16.11.7",
    "@typescript-eslint/eslint-plugin": "5.58.0",
    "@typescript-eslint/parser": "5.58.0",
    "cypress": "^11.0.0",
    "eslint": "~8.15.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "jest": "29.4.3",
    "jest-environment-jsdom": "29.4.3",
    "jest-preset-angular": "13.1.1",
    "ng-packagr": "~15.0.0",
    "nx": "16.2.1",
    "postcss": "^8.4.5",
    "postcss-import": "~14.1.0",
    "postcss-preset-env": "~7.5.0",
    "postcss-url": "~10.1.3",
    "prettier": "^2.6.2",
    "ts-jest": "29.1.0",
    "ts-node": "10.9.1",
    "typescript": "5.0.4"
  },
  "dependencies": {
    "@angular/animations": "~15.0.0",
    "@angular/cdk": "^15.0.0",
    "@angular/common": "~15.0.0",
    "@angular/compiler": "~15.0.0",
    "@angular/core": "~15.0.0",
    "@angular/flex-layout": "^14.0.0-beta.40",
    "@angular/forms": "~15.0.0",
    "@angular/material": "^15.0.0",
    "@angular/material-moment-adapter": "^15.0.3",
    "@angular/platform-browser": "~15.0.0",
    "@angular/platform-browser-dynamic": "~15.0.0",
    "@angular/router": "~15.0.0",
    "@angular/upgrade": "^15.0.0",
    "@ckeditor/ckeditor5-angular": "^4.0.0",
    "@ckeditor/ckeditor5-build-classic": "^35.4.0",
    "@ngx-translate/core": "~14.0.0",
    "@ngx-translate/http-loader": "~7.0.0",
    "@demo/core-components": "~4.6.0",
    "@demo/definitions-plateau": "^3.0.0",
    "@demo/theme-plateau": "~4.6.0",
    "@demo/ux-assets": "4.25.0",
    "@demo/widgets": "~4.6.1",
    "@demo/idp-auth": "^1.4.0",
    "@demo/material": "16.3.0",
    "@demo/moment-adapter": "^2.0.0",
    "@demo/ngx-charts": "^5.0.0",
    "@demo/ngx-datatable": "^6.0.0",
    "@demo/pipes": "^1.0.0-rc.0",
    "@demo/prebuilt-themes": "~5.9.0",
    "@demo/query-builder": "^4.0.0",
    "@demo/rich-text-editor": "^4.0.0",
    "@demo/shell": "~5.9.0",
    "@demo/splitter": "^5.1.0",
    "@demo/theme-roller": "1.0.1",
    "@demo/theming": "~5.9.0",
    "@demo/upgrade": "^4.0.0",
    "@demo/widgets": "18.2.1",
    "@swimlane/ngx-charts": "^20.1.2",
    "@swimlane/ngx-datatable": "^20.1.0",
    "angular": "~1.8.3",
    "angular-animate": "~1.8.3",
    "angular-oauth2-oidc": "^15.0.1",
    "angular-resource": "~1.8.3",
    "angular-route": "~1.8.3",
    "angular-sanitize": "~1.8.3",
    "angular-split": "^14.1.0",
    "angular2-query-builder": "^0.6.2",
    "bootstrap": "~5.1.3",
    "jquery": "~3.6.0",
    "jquery-ui": "~1.13.1",
    "jquery-ui-dist": "~1.13.1",
    "keymaster": "^1.6.2",
    "moment": "^2.29.4",
    "rxjs": "7.8.1",
    "sass": "^1.58.2",
    "tslib": "^2.3.0",
    "underscore": "~1.13.4",
    "zone.js": "~0.11.4"
  }
}

[BenLune]

I have the same problem, Nx was successfully updated (16.2.1) but I'm stucked on previous angular 15 version.

[BenLune]

Now I have this when I nx serve my app I will revert everything and go back to my previous version.

[ruskovweb]

I had the same issue, but after deleting the node_modules folder and installing the dependencies I was able to update the package.json file and Angular to v16.

[BenLune]

Thanks for sharing your experience @ruskovweb
I did the same, removed node_modules, install again, but nothing could happen as my package.json still contains "@angular/core": "15.1.2"
I hope to get news from Nx team, if not I will manually update angular with ng command

[iKrishnaSahu]

@BenLune you can also use nx migrate to update angular dependencies. I did it and it worked just fine.
BTW, nx migrate does not support upgrading multiple packages at once. Check - #17101

1. npx nx migrate @angular/core@latest
2. npm install
3. npx nx migrate --run-migrations
4. npx nx migrate @angular/cli@latest
5. npm install
6. npx nx migrate --run-migrations
7. npx nx migrate @angular/material@latest (run this if you are using material in your application)
8. npm install
9. npx nx migrate --run-migrations

or else (just to save time)

1. npx nx migrate @angular/core@latest
2. Take backup of migrations.json file
3. npx nx migrate @angular/cli@latest
4. Repeat step 2
5. npx nx migrate @angular/material@latest (run this if you are using material in your application)
6. Repeat step 2
7. npm install
8. Merge all the migration backups in root migrations.json file
9. npx nx migrate --run-migrations

[dmitry-stepanenko]

So Nx now checks for existing versions of angular packages to run the migration.

nx/packages/angular/migrations.json

Lines 1034 to 1039 in 78b709e

	"version": "16.1.0-beta.1",
	"x-prompt": "Do you want to update the Angular version to v16?",
	"requires": {
	"@angular/core": ">=15.2.0 <16.0.0",
	"typescript": ">=4.9.3 <5.1"
	},

The problem is it silently updated nx packages while keeping angular as is. That's what happened in my repo, where I have updated Nx to 15.7 because of some Nx features that were needed and forgot to pay attention at the angular versions that were kept at 15.1 in my case.

I believe nx had to bump angular by default, but this didn't happen. Or this only happens only with --interactive flag? I can try to recreate steps that I followed while updaring nx to 15.7 back then if that's needed.

Now running nx migrate nx@15.9 --from=nx@15.0.0 includes missed angular migrations to angular 15.2, which is required for the further upgrade to nx 16.

[leosvelperez]

@dmitry-stepanenko the --interactive flag is only meant to be used to opt out of package updates and migrations. That's why it shouldn't be the default. The default behavior should be to include all package updates and migrations. It seems we have an issue with how we collect and validate a package update requirements in certain scenarios.

The good news is that I was able to reproduce it and I can troubleshoot it properly. I'll be working on fixing this.

In the meantime, you can avoid the issue by updating Nx in smaller increments (maybe a minor at a time). I know it's annoying, but it's just a workaround until we provide a proper fix.

[BenLune]

Hi @iKrishnaSahu ,
Sorry for the late, I had to switch project, but I wanted to thank you a lot for your answer, it helped me a lot !

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.