Yarn PnP Support Status

[clydin]

With the release of Yarn 2.0, many users may be interested in trying out the new version of the package manager with the Angular CLI. As of 9.0, the Angular CLI does not natively support Yarn 2.0 and its new package management strategy named Plug’n’Play (PnP). However, native support is currently and actively being investigated with several initial steps already in place. Native support is tentatively scheduled for inclusion in 10.0 or beyond with the goal of integrating new major versions of upstream dependencies that provide native support.

For those that are interested in experimenting with building applications using the new package manager, you can use the following instructions to workaround the current issues.
WARNING: This is not recommended for use with deployed applications and should not be used in a production environment.

1. Install the workspace dependencies using Yarn 2.0
2. Install the pnpify package: yarn add -D @yarnpkg/pnpify
3. Unplug all Angular related packages including third-party libraries used within the application via yarn unplug <package_name>. This should include at a minimum all @angular scoped packages.
4. If using the E2E command, the webdriver-manager package also needs to be unplugged: yarn unplug webdriver-manager

Once these steps are complete, Angular CLI operations such as serve or build can be used by executing yarn pnpify ng build or yarn pnpify ng serve, respectively.

Please note that manually running the ngcc command with or without the pnpify utility does not currently work.

If any issues are encountered using the workaround steps or for Yarn 2.0 in general, please open a separate issue detailing the problem.

[larixer]

Another way of making Angular 9 work with Yarn 2.0 is to use nodeLinker: node-modules in <project_root>/.yarnrc.yml, this will use node_modules scheme for installation.

Yarn team is investing into node_modules support and trying to make it work better than it was in Yarn 1.x, but the future is definitely not with node_modules.

[andreialecu]

Some possibly relevant information regarding improving yarn 2.0 support:

#14841 (comment)

Replacing read-package-tree with a createRequire implementation might be a first step in that direction. The comment above links to a PR in gatsby where they did something similar.

I noticed that @clydin authored most of the code in that file, perhaps #14841 could be fixed in the process as well.

[Langstra]

How does 2.1 with node_modules linker improvements impact this issue?

https://dev.to/arcanis/yarn-2-1-git-workspaces-focused-installs-loose-mode-live-playground-4kfc

https://yarnpkg.com/configuration/yarnrc#nodeLinker

[klemenoslaj]

With nodeLinker configured to node_modules I was able to migrate a small Angular CLI project without a single issue, with zero installs configuration even.

[ronnyek]

I'm not suggesting it would be trivial to fix this and have it automatically work the way yarn 2 works by default out of box, in addition to continuing to support NPM... but I would say this would probably go a long ways to improve developer experience.

Can't wait until node_modules (at least the way it works today) is a thing of the past.

[andreialecu]

There is ongoing work right now in @angular core packages to rework things in a way that would allow Yarn2+PnP to work natively.

You can read more and track the progress here: angular/angular#38099

[krokofant]

Since the above linked issue was closed we can track the progress here https://github.com/orgs/angular/projects/2

[Lonli-Lokli]

Is there any specific story for that? A lot of issues getting closed with sentence 'track progress here' but no one issue in this project has specific description from closing ones.

[napei]

Since the above linked issue was closed we can track the progress here https://github.com/orgs/angular/projects/2

@JoostK I'm interested in when this linker will be available and if it'll solve yarn 2.0 pnp support? The project board appears to be mostly complete, and with 11.1 just coming out I'm wondering if there's a way we can test this before it's released?

[JoostK]

Since the above linked issue was closed we can track the progress here https://github.com/orgs/angular/projects/2

@JoostK I'm interested in when this linker will be available and if it'll solve yarn 2.0 pnp support? The project board appears to be mostly complete, and with 11.1 just coming out I'm wondering if there's a way we can test this before it's released?

The linker functionality is indeed functionally working, but we're not yet ready to accept published libraries in this new way (we have yet to review the API that would eventually be published to NPM, which needs special considering as it needs to be backwards/forwards compatible). Regarding pnp support, I suspect that it requires that all dependencies no longer depend on ngcc to work correctly, as otherwise you'd still need ngcc which mutates node_modules. So getting this to a working state is in the hands of library maintainers, once the linker is considered stable.

It may be possible to test this support by manually compiling all dependent libraries using the new way and then seeing if that works, but I suppose that it wouldn't tell the whole story as it wouldn't download packages from NPM, which could arguably affect how pnp works.

[Lonli-Lokli]

Sorry but is my understanding correct, that to make pnp works it's required for all angular libs to get updated by their maintainers?

[Falven]

So does this mean Angular is dead in the water as it will always require management of gigs of dependencies, long CI build times, ngcc compilation, unextendible principles coupled with the insurmountable goal of updating every existing Angular library to support pnp functionality? Or is there a streamlined plan to modernize? It seems like nobody wants to take responsibility for these topics on pnp and everybody is just delegating.

[ld210]

Today, i tried to update our app to Angular 15 (currently v14, full PnP). Running the command yarn ng update @angular/core@15 @angular/cli@15 resulted in an error : 0 dependencies found. Package '@angular/core' is not a dependency.`

While the currently installed version of the CLI is outdated, it temporarily install the new version before running the update. I figured the temporary installed CLI used the wrong package manager, despite being configured in the angular.json file. So, i cheated, updating first the CLI with yarn up @angular/cli@15, and then yarn ng update @angular/core@15 @angular/cli@15 worked fine. I had to add this to the .yarnrc.yml though :

packageExtensions:
  "@angular/core@*":
    dependencies:
      "@angular-devkit/core": "*"

Updating Material worked fine as well.

EDIT: sadly, yarn ng serve failed, with tons of errors TS2307: Cannot find module...
Still a work in progress

[hartmair]

@ld210 Try yarn dlx, which uses a temporary installation instead of the local (outdated) one. See

yarn dlx @angular/cli update ...

[ld210]

@ld210 Try yarn dlx, which uses a temporary installation instead of the local (outdated) one. See

yarn dlx @angular/cli update ...

Thanks, it worked, but i had to do yarn dlx @angular/cli@latest update...
The update process went as expected. But im still facing the same issues related to the TS error 2354 and tslib : "This syntax requires an imported helper but module 'tslib' cannot be found"

I updated the sdks with yarn dlx @yarnpkg/sdks, with no effects.

[ld210]

Ok, i think i finally managed to get everything up and running again. What i did :

• i opted-out of PnP mode by setting nodeLinker: node-modules in .yarnrc.yml, and manually deleting all files related to it (sdks, .pnp.cjs, .pnp.loader, vscode settings, etc)
• yarn install to re-install node_modules
• switch back VSCode TS setting to use the node_module one
• basically, return to the state the project was before i opted-in PnP mode
• i then did the Angular update like usual, and update all our dependencies
• yarn set version stable
• and then, i opted-in PnP mode again, using the steps described in the Yarn migration guide
  And now, everything is working well. I don't know what happened. I suspect it has something to do with the Typescript update. Something doesn't work as intended when you simply update the sdks with yarn dlx @yarnpkg/sdks command.

[Zaffer]

I think my issue is because of the angular.json file having this line: "$schema": "./node_modules/@angular/cli/lib/config/schema.json"

I am getting this error when trying to run ionic serve: "[ng] Error: Could not find the '@angular-devkit/build-angular:dev-server' builder's node package."

[ld210]

I think my issue is because of the angular.json file having this line: "$schema": "./node_modules/@angular/cli/lib/config/schema.json"

I am getting this error when trying to run ionic serve: "[ng] Error: Could not find the '@angular-devkit/build-angular:dev-server' builder's node package."

The $schema should not have any impact. See #16980 (comment)

Have you tried yarn ionic serve ?

[Zaffer]

it works!

I think my issue is because of the angular.json file having this line: "$schema": "./node_modules/@angular/cli/lib/config/schema.json"
I am getting this error when trying to run ionic serve: "[ng] Error: Could not find the '@angular-devkit/build-angular:dev-server' builder's node package."

The $schema should not have any impact. See #16980 (comment)

Have you tried yarn ionic serve ?

THANK YOU

[Zaffer]

Just did a 100% clean build running the following commands yarn with PNP worked for the default app:

ng new

ng config cli.packageManager yarn

yarn set version stable

yarn install

yarn add -D @types/node

yarn build

yarn start

[Zaffer]

To get IDE support for YARN PNP in VSCODE when using a monorepo setup:

yarn dlx @yarnpkg/sdks vscode

add these lines to your root .vscode/settings.json file:

}
    "typescript.tsdk": "./services/web/app/.yarn/sdks/typescript/lib",
    "typescript.enablePromptUseWorkspaceTsdk": true
}

(./services/web/app" is the path to your apps .yarn folder)

Then click allow when the popup suggests using the workspace typescript version, or manually change the typescript version when viewing a .ts file.

Only downside I see to this is that your IDE will view all your apps through this apps typescript dependencies.
One way to get around that is to just open each app in its own vscode window and edit the code there.

Good luck!

edit:
You might need to install ZipFS.

Reference: https://yarnpkg.com/getting-started/editor-sdks

[Lonli-Lokli]

I've tried to re-integrate it back, so switched to pnp, run yarn and yarn build.
Got this

PS D:\gitlab\cv-app\frontend\cv-ui> yarn build
    Components styles sourcemaps are not generated when styles optimization is enabled.
⠙ Generating browser application bundles (phase: setup)...Error: EROFS: read-only filesystem, open '/node_modules/.ngcc_lock_file'
    at makeError$1 (D:\gitlab\cv-app\frontend\cv-ui\.pnp.cjs:20267:24)
    at EROFS (D:\gitlab\cv-app\frontend\cv-ui\.pnp.cjs:20294:10)
    at ZipFS.prepareWriteFile (D:\gitlab\cv-app\frontend\cv-ui\.pnp.cjs:22133:13)
    at ZipFS.writeFileSync (D:\gitlab\cv-app\frontend\cv-ui\.pnp.cjs:22117:55)
    at D:\gitlab\cv-app\frontend\cv-ui\.pnp.cjs:23232:20
    at D:\gitlab\cv-app\frontend\cv-ui\.pnp.cjs:23460:60
    at ZipOpenFS.getZipSync (D:\gitlab\cv-app\frontend\cv-ui\.pnp.cjs:23589:14)
    at ZipOpenFS.makeCallSync (D:\gitlab\cv-app\frontend\cv-ui\.pnp.cjs:23460:17)
    at ZipOpenFS.writeFileSync (D:\gitlab\cv-app\frontend\cv-ui\.pnp.cjs:23229:17)
    at VirtualFS.writeFileSync (D:\gitlab\cv-app\frontend\cv-ui\.pnp.cjs:22535:24)
✔ Browser application bundle generation complete.

./apps/cv/src/main.ts - Error: Module build failed (from ./.yarn/__virtual__/@ngtools-webpack-virtual-d2312f103e/0/cache/@ngtools-webpack-npm-15.1.5-286e43dd2c-8a6b3a79f2.zip/node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Emit attempted before Angular Webpack plugin initialization.

./apps/cv/src/polyfills.ts - Error: Module build failed (from ./.yarn/__virtual__/@ngtools-webpack-virtual-d2312f103e/0/cache/@ngtools-webpack-npm-15.1.5-286e43dd2c-8a6b3a79f2.zip/node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Emit attempted before Angular Webpack plugin initialization.

Error: Failed to initialize Angular compilation - NGCC failed.

[alan-agius4]

@Lonli-Lokli, the above, should no longer be an issue in v16 which is in prerelease as NGCC has been removed.

[Lonli-Lokli]

Thanks, I will re-check after release (https://update.angular.io/?v=15.0-16.0 do not have anything so I prefer to live without pnp one more month)

[Zaffer]

Has anyone got this working with the latest version of Angular yet? I get is almost working by running yarn ng serve but for some weird reason the assets were not found, the location was some weird cache location like _yarn_cache_ionic-core-npm-7_0_1-7bc3819a72-50a8337568_zip_node_modules_ionic_core_dist_esm_i-51c9c1.js:2

[jamesrusso]

Is there a way to copy assets which are included in a package (via pnp, ex: pdfjs) in the assets using the same module resolution which was implemented for styles? I can't seem to find any reference to it.

I cannot copy assets from node_modules since it doesn't exist anymore.

[ericparton]

Is there a way to copy assets which are included in a package (via pnp, ex: pdfjs) in the assets using the same module resolution which was implemented for styles? I can't seem to find any reference to it.

I cannot copy assets from node_modules since it doesn't exist anymore.

I'm having the same problem and after working through a ton of other issues, this appears to be the last thing blocking me from using pnp.

[michaelfaith]

after working through a ton of other issues, this appears to be the last thing blocking me from using pnp.

What were the other issues, if you don't mind me asking?

[ericparton]

after working through a ton of other issues, this appears to be the last thing blocking me from using pnp.

What were the other issues, if you don't mind me asking?

Some of it is what you would expect: we had node_modules references hard coded everywhere that we had to remove or replace with something else.

The way we were running the angular cli didn't work anymore either, so we had to wrap that in a call to yarn node (I think the yarn dlx method discussed earlier would also work).

The strangest part was the ton of typescript compilation errors we started seeing for no apparent reason. I eventually tracked that down to the tsconfig.json file, but we've had some version of that file around since Angular 2 back in 2016 and it took some effort to figure out what we had changed in there and what the Angular upgrade process itself had added over the years. The solution there was to basically just copy the tsconfig.json out of the latest Angular reference project and manually make our required changes again; for whatever reason, that fixed the problem.

We also run ng serve in a docker container that's a part of the docker compose stack that we use to mimic our production setup during development. We had to add some additional mount points in there so that it could see the global yarn cache on the developers machines, but that kind of thing might be unique to our setup.

After all that, yarn is much faster and it all seems to work, apart from the fact that we're missing some fonts and images that the assets block in the angular.json file used to handle for us.

[michaelfaith]

I'm finally getting around to moving a library project that uses @schematics/angular and discovering an issue with some code in the NodeModulesEngineHost within @angular-devkit/schematics. From my code, within a unit test, we're using the SchematicTestRunner's runExternalSchematic function to generate a test project. Running that function from within a pnp environment is throwing the following error:

 ENOTDIR: not a directory, lstat '/node_modules/@schematics/angular/collection.json/package.json'

      21005 |
      21006 | function makeError$1(code, message) {
    > 21007 |   return Object.assign(new Error(`${code}: ${message}`), { code });
            |                        ^
      21008 | }
      21009 | function EBUSY(message) {
      21010 |   return makeError$1(`EBUSY`, message);

      at makeError$1 (../../.pnp.cjs:21007:24)
      at ENOTDIR (../../.pnp.cjs:21025:10)
      at ZipFS.resolveFilename (../../.pnp.cjs:22607:15)
      at ZipFS.realpathSync (../../.pnp.cjs:22398:28)
      at ../../.pnp.cjs:23704:100
      at ../../.pnp.cjs:24200:60
      at ZipOpenFS.getZipSync (../../.pnp.cjs:24329:14)
      at ZipOpenFS.makeCallSync (../../.pnp.cjs:24200:17)
      at ZipOpenFS.realpathSync (../../.pnp.cjs:23696:17)
      at VirtualFS.realpathSync (../../.pnp.cjs:23446:26)
      at PosixFS.realpathSync (../../.pnp.cjs:23197:41)
      at NodePathFS.realpathSync (../../.pnp.cjs:23197:41)
      at maybeRealpathSync (../../.yarn/cache/resolve-patch-6d2631dc64-66cc788f13.zip/node_modules/resolve/lib/sync.js:52:16)
      at resolveSync (../../.yarn/cache/resolve-patch-6d2631dc64-66cc788f13.zip/node_modules/resolve/lib/sync.js:97:25)
      at NodeModulesTestEngineHost.resolve (../angular_devkit/schematics/tools/node-module-engine-host.ts:61:39)
      at NodeModulesTestEngineHost.resolve (../angular_devkit/schematics/tools/node-module-engine-host.ts:68:29)
      at createTestCaseSetup (schematics/test-utils.ts:117:40)

This code seems to be improperly joining the collection.json path and the package.json path (/node_modules/@schematics/angular/collection.json/package.json):

angular-cli/packages/angular_devkit/schematics/tools/node-module-engine-host.ts

Line 61 in c34bbb8

const packageJsonPath = require.resolve(join(name, 'package.json'), resolveOptions);

and yarn doesn't know what to do with that.

@alan-agius4 should I open a new issue for this, or track it under this global support issue? This is the first time I've tried building/testing schematic code from within pnp.

This is the code we're running within our test:

const workspaceTree = await runner.runExternalSchematic(
    '@schematics/angular',
    'workspace',
    {
      name: 'workspace',
      version: '7.0.0',
      newProjectRoot: 'projects',
    },
    tree
  );

[michaelfaith]

It seems that the code is trying to blindly grab that path, knowing that this case will fail and hit the catch block, since it then tries an alternative approach just after that. So, my guess is where it's checking the error type, to decide whether to absorb the error or re-throw, it needs to consider this error type too (ENOTDIR)?

angular-cli/packages/angular_devkit/schematics/tools/node-module-engine-host.ts

Lines 69 to 73 in c34bbb8

	} catch (e) {
	if ((e as NodeJS.ErrnoException).code !== 'MODULE_NOT_FOUND') {
	throw e;
	}
	}

[johncrim]

In case it helps anyone, I posted a starter project + how I set it up steps here:

https://github.com/johncrim/ng16-yarn-pnp

With zero install you can just "yarn start" or "F5" after git clone.

I did this just because I couldn't find complete steps for starting from nothing.

[ld210]

Hi there.
I've just updated our projects to Angular v17. For those who wonder how the update went in PnP mode, i had to follow the exact same steps since v14, i.e. opt out of PnP mode and re install node_modules, then update, the opt in PnP mode. The culprit is still the same, updating the typescript sdk doesn't work well (but it is a Yarn issue, i will open one there).
Steps to follow are described here : #16980 (comment)

[michaelfaith]

Hi there. I've just updated our projects to Angular v17. For those who wonder how the update went in PnP mode, i had to follow the exact same steps since v14, i.e. opt out of PnP mode and re install node_modules, then update, the opt in PnP mode. The culprit is still the same, updating the typescript sdk doesn't work well (but it is a Yarn issue, i will open one there). Steps to follow are described here : #16980 (comment)

Similar issue with me. I feel like this should be reported as a new bug. Would you agree?

[ld210]

Similar issue with me. I feel like this should be reported as a new bug. Would you agree?

Absolutely, thank you !

[demurgos]

As of Angular 17.0.8, I can run it with Yarn 4.0.2 PnP with the following config in .yarnrc.yml:

packageExtensions:
  "@angular/animations@17.0.8":
    peerDependencies:
      "@angular/common": "*"
  "@angular/platform-server@17.0.8":
    peerDependencies:
      rxjs: "*"
  "@angular/ssr@17.0.9":
    peerDependencies:
      "@angular/platform-server": "*"

The main issue seem to be misconfigured package that forget some dependencies.

[demurgos]

Regarding my previous comment: it works for the older Webpack builder, but I'm now trying to move to the new esbuild builder and I get a bunch of import errors ☹️

[borgez]

try to clear cache .angular, when change pnp\node-modules for me it helps