Angular 12: No way to provide missing node shims used in libraries

[dmitry-salnikov]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes, the previous version in which this bug was not present was: 11.2

Description

The problem is mentioned in the issue #20731 (comment). But since those comments were marked as off-topic, I'm creating a separate issue for this. The solution mentioned by @clydin (#20731 (comment)) (installing shim packages, e.g. crypto-browserify, and specifying it in paths section of tsconfig.json) works within the project code but not for the npm libraries.

Just to recap, the question is: how can I provide Node.js shims to resolve crypto, stream and other modules in Angular 12 if those modules are referred in npm packages (outside of project code)? There's no clear way to follow instruction mentioned in error logs (I mean adding resolve.fallback) since the webpack config isn't exposed in Angular, and I would prefer to avoid using custom angular builders e.g. https://github.com/just-jeb/angular-builders.

🔥 Exception or Error

./node_modules/swarm-js/node_modules/eth-lib/lib/bytes.js:9:193-227 - Error: Module not found: Error: Can't resolve 'crypto' in '/Users/mitusha/vault12/vault12/node_modules/swarm-js/node_modules/eth-lib/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
	- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "crypto": false }

🌍 Your Environment

Angular CLI: 12.0.0
Node: 14.16.0
Package Manager: npm 6.14.11
OS: darwin x64

Angular: 12.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.0
@angular-devkit/build-angular   12.0.0
@angular-devkit/core            12.0.0
@angular-devkit/schematics      12.0.0
@angular/cdk                    11.2.12
@schematics/angular             11.2.12
rxjs                            6.5.5
typescript                      4.2.4

[alebx]

I just found this workaround: #20819 (comment), where I added an empty file to simulate resolve.fallback: { "crypto": false }.

[clydin]

The path mappings work for all TypeScript and JavaScript files bundled within the application including npm libraries.
As mentioned above, an empty javascript file can be used within a path mapping to simulate the false option.

It is also recommended to avoid libraries that rely on Node.js specific APIs and prefer browser libraries where possible.

[dmitry-salnikov]

Indeed you're right, I've just messed up with paths and baseUrl in tsconfig. Thanks for quick reply and help! Closing the issue.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}