yarn workspaces focus: The root workspace must depend on @angular/cli...

[rhefner]

Using yarn 2.4.0 (though not sure this is specific to yarn 2.4.0 - kinda doubt it), seems like using yarn workspaces focus doesn't work with this plugin. It works fine as long as I don't focus a workspace.

Found this trying to setup our monorepo in our CI system and wanted to focus the workspace to install -- It spews out the following:

# yarn workspaces focus my-workspace
➤ YN0000: ┌ Project validation
➤ YN0000: │ The root workspace must depend on @angular/cli in order to use @yarnpkg/plugin-angular
➤ YN0000: └ Completed
➤ YN0000: ┌ Resolution step

I verified that after, yarn workspace my-workspace g:run:ng doesn't work (where n:run:ng is in the top-level package.json file:

"scripts": {
    ...
    "g:run:ng": "cd $INIT_CWD && yarn ng",
    ...
  },

Thankfully was easily traced to this file. I thought maybe adding @angular/cli to the workspace itself, it would be considered top-level and work, but still has the same issue. I can, however, run yarn workspace my-workspace run ng if @angular/cli is present in the workspace manifest itself.

From the docs:

Note that this command is only very moderately useful when using zero-installs, since the cache will contain all the packages anyway - meaning that the only difference between a full install and a focused install would just be a few extra lines in the .pnp.js file, at the cost of introducing an extra complexity.

I guess using the offline cache may be the best bet vs yarn workspaces focus ..., but figured I would bring it up anyways.

[bgotink]

Hmm, yeah I hadn't considered focused workspaces to be honest 🤔

Right now the plugin takes the @angular/cli and exposes it to all workspaces in the repository. This should actually remove the need for the g:run:ng script you've got, you should be able to use yarn ng directly in any workspace.

I'll see if I can find another solution to the problem, one where the plugin respects locally installed @angular/cli packages.

[bgotink]

I've rewritten the yarn ng command quite a bit. Could you give it a go with a local build of the plugin and see if this works better?

There are a couple of other changes I'd like to include before tagging a release at the moment, but I should have a new release somewhere this week.

[rhefner]

@bgotink That was quick! :) Yes, I will give it a try today and report back.

[rhefner]

@bgotink QQ: One thing I noticed when trying to run a build a few days back:

# yarn
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 0s 379ms
➤ YN0000: Done in 0s 670ms
# yarn -v
2.3.2
# yarn build
[!] Error: Cannot find package '@rollup/plugin-commonjs' imported from /Users/hef/work/repos/shift/richard.hefner/yarn-plugin-angular/rollup.config.mjs
Did you mean to import @rollup-plugin-commonjs-virtual-d0015c7211/0/cache/@rollup-plugin-commonjs-npm-15.0.0-21ab5aeaf4-c48493cabb.zip/node_modules/@rollup/plugin-commonjs/dist/index.js?
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@rollup/plugin-commonjs' imported from /Users/hef/work/repos/shift/richard.hefner/yarn-plugin-angular/rollup.config.mjs
Did you mean to import @rollup-plugin-commonjs-virtual-d0015c7211/0/cache/@rollup-plugin-commonjs-npm-15.0.0-21ab5aeaf4-c48493cabb.zip/node_modules/@rollup/plugin-commonjs/dist/index.js?
    at packageResolve (internal/modules/esm/resolve.js:655:9)
    at moduleResolve (internal/modules/esm/resolve.js:696:18)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:810:11)
    at Loader.resolve (internal/modules/esm/loader.js:85:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:229:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:51:40)
    at link (internal/modules/esm/module_job.js:50:36)

I changed rollup.config.mjs to rollup.config.js and it works fine (this was a few days back when I was trying to build the project) .. Is there something special that needs to be done to have rollup work as-is? I haven't found an answer and just change the filename. :)

[rhefner]

Right now the plugin takes the @angular/cli and exposes it to all workspaces in the repository. This should actually remove the need for the g:run:ng script you've got, you should be able to use yarn ng directly in any workspace.

This isn't working for me. I can run yarn ng in the root workspace fine, but when I run yarn workspace my-workspace ng, I get:

(node:6390) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 uncaughtException listeners added to [process]. Use emitter.setMaxListeners() to increase limit
(Use `node --trace-warnings ...` to show where the warning was created)
Usage Error: Couldn't find a script named "ng".

$ yarn run [--inspect] [--inspect-brk] <scriptName> ...

Adding the g:run:ng top-level package.json script works fine... ¯_(ツ)_/¯

[bgotink]

About the build error: yeah a colleague of mine just told me he has the same issue. Weirdly it works fine on my machine. Could you tell me the node version you're using? I think rollup uses the built-in native ESM loading for newer node versions, and ESM are not yet supported in Yarn's PnP linker.

And about the ng command not working: hmm, I tested in a nested workspace on a repo here before pushing the change yesterday and it worked. Did you get this error in your focused workspace or in a repo where everything was installed?

[rhefner]

Sorry for the late response!

Could you tell me the node version you're using?

v14.15.0

I think rollup uses the built-in native ESM loading for newer node versions, and ESM are not yet supported in Yarn's PnP linker.

Interesting... I think I've tried v15 of node as well with no luck. Hmm. I must be doing something wrong.

Did you get this error in your focused workspace or in a repo where everything was installed?

Not focused, everything was installed.

[bgotink]

Not sure how this worked earlier on my repo earlier, but I could reproduce your issue now. I did uninstall my global @angular/cli, maybe that had something to do with it 🤔

Could you retest with a test build? It should now work for both the full install and a focused workspace.

[rhefner]

Yep! I will re-test as soon as I can, hopefully by tomorrow if not earlier.

[rhefner]

I had time to test this out today and I still couldn't get it to work. I synced up my fork with your latest, verified the 2 commits are there that are on the 'latest' branch and ran yarn generate-patches and yarn build but nothing new was generated under bundles/@yarnpkg

I ran through the following steps just to check to see if the lack of new bundles mattered:

> yarn cache clean --all
> yarn plugin remove @yarnpkg/plugin-angular
> yarn plugin import ../yarn-plugin-angular-rhefner/bundles/@yarnpkg/plugin-angular.dev.js
> yarn workspaces focus my-workspace

But yarn ng in the root or the my-workspace package yield:

Usage Error: Couldn't find a script named "ng".

$ yarn run [--inspect] [--inspect-brk] <scriptName> ...

...Again - sorry for the late reply! :)

[bgotink]

I've created a repo with a workspace, and added the @angular/cli package as dependency to both the root and the workspace package.json files. Using yarn workspaces focus in that single workspace, I can successfully run yarn ng version in the workspace. Running it outside of the workspace yields an error, but that's to be expected because of the focused install.

Are there any steps missing in my reproduction?

bram $ yarn workspaces focus my-workspace
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 0s 338ms
➤ YN0000: Done in 0s 511ms

bram $ yarn ng help
Usage Error: Couldn't find a script named "ng".

$ yarn run [--inspect] [--inspect-brk] <scriptName> ...

bram $ yarn workspace my-workspace ng help
Available Commands:
  add Adds support for an external library to your project.
  analytics Configures the gathering of Angular CLI usage metrics. See https://angular.io/cli/usage-analytics-gathering.
  build (b) Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory.
  deploy Invokes the deploy builder for a specified project or for the default project in the workspace.
  config Retrieves or sets Angular configuration values in the angular.json file for the workspace.
  doc (d) Opens the official Angular documentation (angular.io) in a browser, and searches for a given keyword.
  e2e (e) Builds and serves an Angular app, then runs end-to-end tests using Protractor.
  extract-i18n (i18n-extract, xi18n) Extracts i18n messages from source code.
  generate (g) Generates and/or modifies files based on a schematic.
  help Lists available commands and their short descriptions.
  lint (l) Runs linting tools on Angular app code in a given project folder.
  new (n) Creates a new workspace and an initial Angular application.
  run Runs an Architect target with an optional custom builder configuration defined in your project.
  serve (s) Builds and serves your app, rebuilding on file changes.
  test (t) Runs unit tests in a project.
  update Updates your application and its dependencies. See https://update.angular.io/
  version (v) Outputs Angular CLI version.

For more detailed help run "ng [command name] --help"

sorry for the late reply!

Don't worry about it :)