I have a bunch of little apps that I have developed using npm, and the node_modules directories eat up a ton of disk space, so I am investigating switching to pnpm, which I understand should help.
I did this command: ionic config set -g npmClient pnpm
And then I created a new ionic project and built it and it all worked great.
But, when I go to an older project, delete the node_modules directory, and then do pnpm install and then ionic build, I get lots of errors.
E.g.,
Generating browser application bundles (phase: setup)...file:///Users/vtn2/ionic/whoswho/node_modules/.pnpm/@angular+compiler-cli@13.2.7_rve3xvdirwufokwcjqaqs6xv7i/node_modules/@angular/compiler-cli/bundles/chunk-CTSDWZWQ.js:941
throw new Error(`The target entry-point "${invalidTarget.entryPoint.name}" has missing dependencies:
^
Error: The target entry-point "ngx-material-rating" has missing dependencies:
- @angular/cdk/coercion
- @angular/material/button
- @angular/material/icon
- ngx-range
- @angular/material/core
In my experience, it is possible to make pnpm work with some extra efforts.
Because some of the default behavior in pnpm is sightly different from npm (Reference: Feature Comparison | pnpm), I usually enable the Hoisted node_modules feature to avoid some errors related to missing dependencies.
1. Enable the Hoisted node_modules feature for pnpm
create a .npmrc file in the project root, then add the following line:
shamefully-hoist=true
After that, regenerate a new node_modules directory (remove it, then run pnpm install) before running build command.
2. Install missing dependencies manually
If the missing dependencies error still occurs, try to install them via pnpm install command.
e.g. If the error messages look like the following:
Error: The target entry-point "ngx-material-rating" has missing dependencies:
- @angular/cdk/coercion
- @angular/material/button
- @angular/material/icon
- ngx-range
- @angular/material/core
This means we could run pnpm install @angular/cdk @angular/material ngx-range to install them.
3. Misc
Also, you might want to do pnpm exec ng config cli.packageManager pnpm command.
This setting will make Angular cli using pnpm instead of npm when performing something like ng update.
Now I’m trying to make an android build and I get this error. I wonder if you’ve seen this before?
ionic cap build
? What platform would you like to build for? android
Error: Non-zero exit from subprocess.
at Integration.<anonymous>
(/Users/vtn2/Library/pnpm/global/5/.pnpm/@ionic+cli@6.20.8/node_modules/@ionic/cli/lib/integrations/capacitor/index.js:46:27)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async BuildCommand.getInstalledPlatforms
(/Users/vtn2/Library/pnpm/global/5/.pnpm/@ionic+cli@6.20.8/node_modules/@ionic/cli/commands/capacitor/base.js:117:21)
at async BuildCommand.isPlatformInstalled
(/Users/vtn2/Library/pnpm/global/5/.pnpm/@ionic+cli@6.20.8/node_modules/@ionic/cli/commands/capacitor/base.js:133:27)
at async BuildCommand.checkForPlatformInstallation
(/Users/vtn2/Library/pnpm/global/5/.pnpm/@ionic+cli@6.20.8/node_modules/@ionic/cli/commands/capacitor/base.js:232:19)
at async BuildCommand.preRun
(/Users/vtn2/Library/pnpm/global/5/.pnpm/@ionic+cli@6.20.8/node_modules/@ionic/cli/commands/capacitor/build.js:95:9)
at async BuildCommand.execute
(/Users/vtn2/Library/pnpm/global/5/.pnpm/@ionic+cli@6.20.8/node_modules/@ionic/cli/lib/command.js:42:13)
at async Executor.run
(/Users/vtn2/Library/pnpm/global/5/.pnpm/@ionic+cli@6.20.8/node_modules/@ionic/cli/lib/executor.js:54:9)
at async Executor.execute
(/Users/vtn2/Library/pnpm/global/5/.pnpm/@ionic+cli-framework@5.1.3/node_modules/@ionic/cli-framework/lib/executor.js:70:13)
at async Object.run
(/Users/vtn2/Library/pnpm/global/5/.pnpm/@ionic+cli@6.20.8/node_modules/@ionic/cli/index.js:110:9)