Nx16 - Angular 16 not updated to the latest with warning (yarn 3)

[Lonli-Lokli]

Current Behavior

Migration script gives this message and DO NOT update angular to the latest version

PS D:\gitlab\cv-app\frontend\cv-ui> yarn update
Failed to install the latest version of the migration script. Using the current version.
Fetching meta data about packages.
It may take a few minutes.
Fetching [email protected]
Fetching [email protected]
Fetching @nx/[email protected]
Fetching @nx/[email protected]

Expected Behavior

Latest angular installed, no warnings

GitHub Repo

https://gitlab.com/lonli.lokli/cv-app/-/tree/angular16?ref_type=heads

Steps to Reproduce

yarn update

Nx Report

>  NX   Its time to update Nx 🎉

   Your repository uses a higher version of Nx (16.2.1) than your global CLI version (15.9.2)
   For more information, see https://nx.dev/more-concepts/global-nx


 >  NX   Report complete - copy this into the issue template

   Node   : 18.16.0
   OS     : win32 x64
   yarn   : 3.4.1
   Hasher : Native

   nx (global)      : 15.9.2
   nx               : 16.2.1
   @nrwl/js         : 16.2.1
   @nrwl/jest       : 16.2.1
   @nrwl/linter     : 16.2.1
   @nrwl/workspace  : 16.2.1
   @nrwl/angular    : 16.2.1
   @nrwl/cypress    : 16.2.1
   @nrwl/devkit     : 16.2.1
   @nrwl/tao        : 16.2.1
   @nrwl/webpack    : 16.2.1
   nx-cloud         : 16.0.5
   typescript       : 5.0.4
   ---------------------------------------
   Community plugins:
   @auth0/auth0-angular    : 2.1.0
   @briebug/jest-schematic : 6.0.0
   @ngneat/spectator       : 14.0.0
   devextreme-angular      : 23.1.3
   ngx-toastr              : 17.0.2

Failure Logs

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response

[Coly010]

I can see your workspace is already on version 16 of Angular. We are still working on adding support for Angular 16.1. You can follow along with the progress here: #17155

[Lonli-Lokli]

I saw the same non-updatable with migration from Nx15, but I can wait and recheck when commit lands

[Lonli-Lokli]

@Coly010 @leosvelperez Issue is still reproducible with my repository, even after 16.14.0 release

[leosvelperez]

@Lonli-Lokli I took a closer look at your repo and the Angular dependencies are not being updated because they are detached from Nx.

It looks like you added Nx to the repo with the latest Nx version at the time, and that version was already ahead of the Angular version you were using. Nx 15.9.2 comes with Angular 15.2.0, but your repo was with Angular 15.1.0. The nx init command (I'm guessing you used it to add Nx) won't perform any updates to your packages and it adds the latest Nx version that supports your Angular version. Since Nx 15.7.0, the latest versions of Nx support the current major version of Angular and the LTS versions. Therefore, Nx 15.9.2 was added to your repo which supports Angular 15.1.0.

In your workspace, if you want to update your Angular versions and keep them up to date, you can run:

yarn nx migrate latest --from [email protected] --exclude-applied-migrations

There, we are telling the migrate command to update Nx as if the 15.8.0-beta.0 version was installed in the workspace. That way, Nx will pick up the migration to Angular ~15.2.0 which is the version Nx 15.9.2 comes with (it was added in Nx 15.8.0). For reference: https://nx.dev/recipes/other/advanced-update#updating-dependencies-that-are-behind-the-versions-nx-manages.

Please note that's something you only need to do when your Angular version is detached from the Nx version (behind the latest Angular version Nx comes with https://nx.dev/packages/angular/documents/angular-nx-version-matrix#nx-and-angular-version-compatibility-matrix). After you perform the above migration to align the Angular version with what Nx comes with, you can continue to use yarn nx migrate latest for future migrations if you want to keep upgrading Angular alongside Nx.

[leosvelperez]

As per the warning, I couldn't exactly reproduce it. Nx successfully installed the latest version (this is a temp installation of the latest Nx to use the latest version of the migrate command) but then it failed to run the migrate command code, because we don't support Yarn PnP yet (#2386). Since that installation is in a temp folder (outside the repo), it doesn't use your .yarnrc.yml and the default nodeLinker is used (pnp). This causes the migration code to fail because it's not yet supported.

So, I had to run the migrations with the local Nx version:

NX_MIGRATE_USE_LOCAL=true yarn nx migrate latest --from [email protected] --exclude-applied-migrations
NX_MIGRATE_USE_LOCAL=true yarn nx migrate latest

That way, Nx uses the locally installed version to perform the migrations.

[leosvelperez]

I'm going to close this issue. The Angular versions were not updated because they are detached from the Nx version. Please follow the recommendations in #17642 (comment) to get the version updated and aligned to Nx if that's what you want/need.

As a follow-up. I'll look into potentially communicating to users they are using Angular "detached" from Nx when nx init runs.

[Lonli-Lokli]

Just wow. Thank you! So the original problem was the mismatch between angular and nx during initialization

[Lonli-Lokli]

@leosvelperez I've tried your proposal, and the first part was completed successfully (package.json update) Second one, running the migrations from migrations.json, did not

1. Added "nx": "nx", to the scripts section first, then

$ NX_MIGRATE_USE_LOCAL=true yarn nx migrate --run-migrations=migrations.json

 >  NX   Running 'yarn' to make sure necessary packages are installed

➤ YN0000: ┌ Resolution step
➤ YN0002: │ @nrwl/angular@npm:16.4.0 doesn't provide @angular-devkit/build-angular (p1f6fc), requested by @nx/angular
➤ YN0002: │ @nrwl/angular@npm:16.4.0 doesn't provide @angular-devkit/core (pf2204), requested by @nx/angular
➤ YN0002: │ @nrwl/angular@npm:16.4.0 doesn't provide @angular-devkit/schematics (pb2eb2), requested by @nx/angular
➤ YN0002: │ @nrwl/angular@npm:16.4.0 doesn't provide @schematics/angular (pfa022), requested by @nx/angular
➤ YN0002: │ @nrwl/angular@npm:16.4.0 doesn't provide rxjs (pd07c3), requested by @nx/angular
➤ YN0002: │ @nrwl/devkit@npm:16.4.0 doesn't provide nx (pb9071), requested by @nx/devkit
➤ YN0002: │ @nx/angular@npm:16.4.0 [d74da] doesn't provide @types/node (pf5aae), requested by ts-node
➤ YN0002: │ @nx/angular@npm:16.4.0 [d74da] doesn't provide eslint (p1f5cc), requested by @typescript-eslint/type-utils
➤ YN0002: │ @nx/angular@npm:16.4.0 [d74da] doesn't provide nx (p7ee23), requested by @nx/devkit
➤ YN0002: │ @nx/angular@npm:16.4.0 [d74da] doesn't provide typescript (p12bbd), requested by @phenomnomnominal/tsquery
➤ YN0002: │ @nx/angular@npm:16.4.0 [d74da] doesn't provide typescript (p67d35), requested by ts-node
➤ YN0002: │ @nx/angular@npm:16.4.0 [f4bce] doesn't provide @types/node (p8f80d), requested by ts-node
➤ YN0002: │ @nx/angular@npm:16.4.0 [f4bce] doesn't provide eslint (pe5c39), requested by @typescript-eslint/type-utils
➤ YN0002: │ @nx/angular@npm:16.4.0 [f4bce] doesn't provide nx (p86a8f), requested by @nx/devkit
➤ YN0002: │ @nx/angular@npm:16.4.0 [f4bce] doesn't provide typescript (p97193), requested by @phenomnomnominal/tsquery
➤ YN0002: │ @nx/angular@npm:16.4.0 [f4bce] doesn't provide typescript (p9da38), requested by ts-node
➤ YN0002: │ @nx/cypress@npm:16.4.0 [fddfe] doesn't provide nx (pa2157), requested by @nx/devkit
➤ YN0002: │ @nx/cypress@npm:16.4.0 [fddfe] doesn't provide typescript (pd27c2), requested by @phenomnomnominal/tsquery
➤ YN0002: │ @nx/jest@npm:16.4.0 doesn't provide nx (p3d0c3), requested by @nx/devkit
➤ YN0002: │ @nx/jest@npm:16.4.0 doesn't provide typescript (pd333a), requested by @phenomnomnominal/tsquery
➤ YN0002: │ @nx/js@npm:16.4.0 [ee334] doesn't provide nx (p8e847), requested by @nx/devkit
➤ YN0002: │ @nx/js@npm:16.4.0 [ee334] doesn't provide typescript (pa0b29), requested by @phenomnomnominal/tsquery
➤ YN0002: │ @nx/linter@npm:16.4.0 [fddfe] doesn't provide nx (peb397), requested by @nx/devkit
➤ YN0002: │ @nx/linter@npm:16.4.0 [fddfe] doesn't provide typescript (p83a52), requested by @phenomnomnominal/tsquery
➤ YN0002: │ @nx/webpack@npm:16.4.0 doesn't provide @types/node (pf6e0e), requested by ts-node
➤ YN0002: │ @nx/webpack@npm:16.4.0 doesn't provide nx (p11188), requested by @nx/devkit
➤ YN0002: │ @nx/webpack@npm:16.4.0 doesn't provide typescript (pd3cc5), requested by fork-ts-checker-webpack-plugin
➤ YN0002: │ @nx/webpack@npm:16.4.0 doesn't provide typescript (p7044a), requested by ts-loader
➤ YN0002: │ @nx/webpack@npm:16.4.0 doesn't provide typescript (pc0bba), requested by ts-node
➤ YN0060: │ @schuchard/schematics-core@npm:0.4.2 provides inquirer (p18a5f) with version 7.0.3, which doesn't satisfy what inquirer-autocomplete-prompt requests        
➤ YN0060: │ cv-ui@workspace:. provides @ngneat/overview (pa2392) with version 3.0.4, which doesn't satisfy what @ngneat/helipopper requests
➤ YN0060: │ cv-ui@workspace:. provides jest (p11ca3) with version 29.4.3, which doesn't satisfy what @angular-devkit/build-angular requests
➤ YN0060: │ cv-ui@workspace:. provides jest-environment-jsdom (pc77b2) with version 29.4.3, which doesn't satisfy what @angular-devkit/build-angular requests
➤ YN0060: │ cv-ui@workspace:. provides stylelint (p161c3) with version 15.9.0, which doesn't satisfy what stylelint-config-prettier requests
➤ YN0002: │ openapi2typescript@npm:0.2.1 [f4bce] doesn't provide react (pd8479), requested by react-fetching-library
➤ YN0002: │ openapi2typescript@npm:0.2.1 [f4bce] doesn't provide react-dom (p7db94), requested by react-fetching-library
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed in 0s 811ms
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 0s 895ms
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 1s 125ms                                                                                                                                       
➤ YN0000: Done with warnings in 2s 983ms

 >  NX   Running migrations from 'migrations.json'

Could not replace @nrwl/workspace with @nx/workspace in node_modules\@angular\cli\node_modules\resolve\test\resolver\malformed_package_json\package.json.
Could not replace @nrwl/workspace with @nx/workspace in node_modules\resolve\test\resolver\malformed_package_json\package.json.

And it's not changed anymore (waited for about 10 minutes)

[leosvelperez]

@Lonli-Lokli the issue is that your .gitignore file is, at least, missing an entry for node_modules. So migrations that traverse the workspace files are processing your whole node_modules because it's not ignored and that's expensive. Make sure to add an entry for it in your .gitignore file.

I'd recommend having a look at our defaults here https://github.com/nrwl/nx/blob/master/packages/workspace/src/generators/new/files-integrated-repo/__dot__gitignore and amend your .gitignore file accordingly. That's the template we use when we generate new workspaces.

BTW, you don't need to add "nx": "nx", yarn nx will run the locally installed nx.

[Lonli-Lokli]

@leosvelperez Thanks, I will try. I have multiple .gitignore files, node_modules were in the root one, I will try to add it to the UI subfolder as well

[leosvelperez]

Yeah, I think we have some support for nested .gitignore files, but maybe it's not fully supported in all scenarios. I'll bring this internally as a separate issue to see if it can be improved. For now, please ensure your Nx workspace's root .gitignore file contains the relevant folders to ignore.

[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.