crypto-js library in angular webpack < 5 has error?

user_14482559 0
Viewed 2371

I'm using crypto-js in angular 11 but as when I update the webpack this annoying warning has appeared and I don't know how and where(path) I can solve it !!! the error is :

 ./node_modules/crypto-js/core.js:43:22-39 - Warning: Module not found: Error: Can't resolve 'crypto' in 'D:\node_modules\crypto-js'

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 }

Warning: D:\cryptoJs.service.ts depends on 'crypto-js'. CommonJS or AMD dependencies can cause optimization bailouts.

i even installed crypto-browserify but not solved yet. how to be handled?

angular
1 Answers

upgrade from angular 11 to angular 12 and I got the same error, I corrected it as follows

uninstall crypto-browserify and add this lines paths.crypto

// tsconfig.json
{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "crypto": [
                "node_modules/crypto-js"
            ]
        }
    }
}

In angular.json file change all "aot" properties to true, add crypto-js to allowedCommonJsDependencies and add the path "node_modules/crypto-js/crypto-js.js" in scripts (remember to install the latest version of crypto-js using npm "crypto-js": "^4.0.0",)

 {
    "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
            "aot": true,
            "assets": [
                "src/favicon.ico",
                "src/assets"
            ],
            "styles": [
                "src/styles.scss"
            ],
            "scripts": [
                "node_modules/crypto-js/crypto-js.js"
            ],
            "allowedCommonJsDependencies": [
                "crypto-js"
            ]
        },
        "configurations": {
            "production": {
                "aot": true
            }
        }
    }
}

that's all, this should work and the crypto-js warning should no longer appear

user_53772450
Related