I have basic question about webpack 5 configuration since I have zero experience with it. I would like to create most simple Angular application that uses node.js module crypto-js and SHA256.
Before webpack 5 it was quite simple. You didn't have to worry about webpack, it was somewhere in behind.
In command prompt I did : ng new TestApp -> cd TestApp -> npm install crypto-js -> npm install --save @types/crypto-js -> write simple test code with imported SHA256 -> build it and -> it worked!
Now I get message:
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 }
I have to install this module and include this polyfill inside config file. The question is howto write most simple webpack.config.js, where to put it and what to include in it besides these lines?
BR
I ran into this problem after upgrading to Angular 12, so after searching I ended up doing the following:
In tsconfig.json I added:
{
"compilerOptions": {
"paths":{
"crypto":["node_modules/crypto-js"]
}
}
}
And in angular.json I added:
{
"architect": {
"build": {
"options": {
"allowedCommonJsDependencies": ["crypto"],
}
}
}
}
And the warnings are gone. I hope this will help you out.
Sadly, the webpack configuration is hidden by Angular that only give you access to some options exposed by the AngularCli.
However you can use the package @angular-builders/custom-webpack that works very well. It's easy to use and you can substitute some webpack options without breaking all the configuration provided by Angular.
So, in your case, you could add a crypto-browserify as fallback for "crypto". In that case your webpack extra config file would look like :
{ resolve: { fallback: { crypto: "./node_modules/crypto-browserify" } } }
I had the same issue, this is the working solution i found on git hub. https://github.com/ChainSafe/web3.js/issues/4070
run in your project directory:
npm install crypto-browserify stream-browserify assert stream-http https-browserify os-browserify
tsconfig.json Add this in:"compilerOptions": { [...] }
"paths" : {
"crypto": ["./node_modules/crypto-browserify"],
"stream": ["./node_modules/stream-browserify"],
"assert": ["./node_modules/assert"],
"http": ["./node_modules/stream-http"],
"https": ["./node_modules/https-browserify"],
"os": ["./node_modules/os-browserify"],
}
The below steps will help resolve this problem
Install the browserify ports for crypto and stream
npm install crypto-browserify stream-browserify
In tsconfig.json under compiler options, add the below lines. Since webpack is not auto-exporting the polyfills, these specify a set of entries that re-map imports to additional lookup locations.
"paths":{
"crypto":["node_modules/crypto-browserify"],
"stream":["node_modules/stream-browserify"]
}
In angular.json under architect->build->options add the below line which says the CommonJS packages crypto should be used without a build time warning.
"allowedCommonJsDependencies": ["crypto"]
Note : Read what browserify does.
In addition to @Nicolas 's answer, I also had a problem the 'Global is undefined'.
To solve that I had to add those lines to 'polyfills.ts' :
(window as any).global = window;
(window as any).process = {
env: {DEBUG: undefined},
};