ng add doesn't use the proper yarn registry.

[grosch-intl]

🐞 Bug report

Command (mark with an x)

• add

Is this a regression?

Unknown

Description

ng add fails to look at the custom registry definition. If I run with ng add it fails due to look for the package in registry.npmjs.org. If I instead just yarn install it looks at the custom registry from the vendor.

A clear and concise description of the problem...

🔬 Minimal Reproduction

ng new repo
cd repo
yarn set version berry
yarn install
ng add @infragistics/igniteui-angular

🔥 Exception or Error

$ ng add @infragistics/igniteui-angular --verbose
- Determining package manager...
i Using package manager: yarn
- Searching for compatible package version...
Locating potential npmrc files:
Locating potential yarnrc files:
Trying 'C:\Users\xyz\.yarnrc'...found.
Trying 'C:\Users\xyz\.yarnrc'...found.
× Unable to load package information from registry: request to https://registry.npmjs.org/@infragistics%2figniteui-angular failed, reason: connect ETIMEDOUT 104.16.25.35:443

So you can see that while it's using yarn, it's somehow avoiding the ~/.yarnrc.yml file.

🌍 Your Environment

Angular CLI: 13.1.4
Node: 16.13.0
Package Manager: yarn 3.2.1
OS: win32 x64

Angular: 
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1301.4 (cli-only)
@angular-devkit/build-angular   
@angular-devkit/core            13.1.4 (cli-only)
@angular-devkit/schematics      13.1.4 (cli-only)
@angular/cli                    13.1.4 (cli-only)
@schematics/angular             13.1.4 (cli-only)
rxjs                            6.6.7 (cli-only)
typescript                      4.5.4 (cli-only)

Anything else relevant?

My ~/.angular-config.json files specifies to use yarn

$ cat ~/.angular-config.json
{
  "version": 1,
  "cli": {
    "analytics": false,
    "packageManager": "yarn",
    "completion": {
      "prompted": true
    }
  }
}

If I just straight-up run a yarn install of that package, it works without issue, showing that my yarn configuration is set up properly as far as a proxy, the registry for that prefix, etc...

$ yarn add @infragistics/igniteui-angular
➤ YN0000: ┌ Resolution step
➤ YN0032: │ fsevents@npm:2.3.2: Implicit dependencies on node-gyp are discouraged
➤ YN0032: │ nice-napi@npm:1.0.2: Implicit dependencies on node-gyp are discouraged
➤ YN0032: │ node-addon-api@npm:3.2.1: Implicit dependencies on node-gyp are discouraged
➤ YN0061: │ querystring@npm:0.2.0 is deprecated: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
➤ YN0061: │ source-map-resolve@npm:0.6.0 is deprecated: See https://github.com/lydell/source-map-resolve#deprecated
➤ YN0000: └ Completed in 7s 524ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ yallist@npm:4.0.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yaml@npm:1.10.2 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yargs-parser@npm:21.0.1 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yargs@npm:17.5.1 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ zone.js@npm:0.11.6 can't be found in the cache and will be fetched from the remote registry
➤ YN0000: └ Completed in 15s 223ms
➤ YN0000: ┌ Link step
➤ YN0031: │ One or more node_modules have been detected and will be removed. This operation may take some time.
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0007: │ @angular/cli@npm:13.1.4 must be built because it never has been before or the last one failed
➤ YN0007: │ core-js@npm:3.19.3 must be built because it never has been before or the last one failed
➤ YN0007: │ esbuild@npm:0.14.11 must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 14s 764ms
➤ YN0000: Done with warnings in 37s 708ms

[alan-agius4]

It looks like Yarn 2+ is a can of breaking changes and behaviours. Going through the docs it appears that they removed support for .yarnrc and instead this was replaced with .yarnrc.yml and most all of the options have been renamed. In addition to that, unlike Yarn 1 options in .npmrc are ignored.

More context:
https://yarnpkg.com/getting-started/migration#dont-use-npmrc-files
https://yarnpkg.com/configuration/yarnrc

Recently @clydin and myself did have a chat that we should probably start using the package manager CLI directly to retrieve the package information example npm info --json @angular/cli, yarn info @angular/cli --json.

[dedalusMohantyMa]

We just had a similar issue with ng update, it was not able to resolve our companies package repositories configured in our .yarnrc.yml

[michael-peto-camis]

@dedalusMohantyMa we have the same issue you're describing. Did you find any workarounds?

[alan-agius4]

As a workaround you can try to use the —-registry option.

[Pascalmh]

I could ng update to v15 the following way:

• Delete yarn.lock and move .yarnrc.yml to somewhere outside the git repo
• Add .npmrc (add registry=… and other settings you had/need from .yarnrc.yml)
• Commit changes "feat: update to angular 15" (we'll amend this commit later)
• run update command ng update @angular/core@15 @angular/cli@15
• remove package-lock.json
• remove .npmrc
• move your .yarnrc.yml back into the project
• yarn install
• add all changes and amend previous commit
• done

[dedalusMohantyMa]

I could ng update to v15 the following way:

* Delete `yarn.lock` and move `.yarnrc.yml` to somewhere outside the git repo

* Add .npmrc (add `registry=…` and other settings you had/need from .yarnrc.yml)

* Commit changes "feat: update to angular 15" (we'll amend this commit later)

* run update command `ng update @angular/core@15 @angular/cli@15`

* remove package-lock.json

* remove .npmrc

* move your `.yarnrc.yml` back into the project

* `yarn install`

* add all changes and amend previous commit

* done

I guess then I also have to change my package manager configuration in my angular.json for this to work

[harryt04]

This is blocking my team from being able to update angular. We have a few private npm packages that authenticate using the .yarnrc.yml file, but it appears ng cli is unable to pick up on these settings.

I tried running this update with the latest ng cli available, and it still fails with this error. I also tried the workaround mentioned above by trying to use an .npmrc file instead, but with no luck.

ng update
Using package manager: yarn
Collecting installed dependencies...
Found 113 dependencies.
✖ Migration failed: 404 Not Found - GET https://registry.npmjs.org/@fortawesome%2ffontawesome-pro - Not found
  See "/private/var/folders/ct/wgx3r7xn3432crb39pmcw35r0000gs/T/ng-WNmI7y/angular-errors.log" for further details.

Here is my .yarnrc.yml:

enableStrictSsl: false

nmHoistingLimits: workspaces

nodeLinker: node-modules

npmScopes:
  fortawesome:
    npmAlwaysAuth: true
    npmAuthToken: <redacted>
    npmRegistryServer: "https://npm.fontawesome.com/"
  vicore:
    npmAlwaysAuth: true
    npmPublishRegistry: "<redacted>"
    npmRegistryServer: "<redacted>"
  xactremodel:
    npmAlwaysAuth: true
    npmPublishRegistry: "<redacted>"
    npmRegistryServer: "<redacted>"

yarnPath: .yarn/releases/yarn-2.4.3.cjs

[Pascalmh]

@harryt04 it should not say Using package manager: yarn when running the ng update - you need to switch to npm as your package manager for the workaround to work. Check your Project if there is more relation to yarn and remove it before the ng update (and restore it after) - good luck!

[amakhrov]

Any update on that?

We've used the workaround suggested above (temporarily switch to NPM) for the initial v15 update, but any further update requires the same workaround over and over.