angular - angular webpack < 5 中的 crypto-js 库有错误？

Question

我在 angular 11 中使用 crypto-js，但是当我更新 webpack 时出现了这个烦人的警告，我不知道如何以及在哪里(路径)我可以解决它!错误是:

 ./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.

我什至安装了 crypto-browserify 但还没有解决。如何处理？

Answer 1

从 Angular 11 升级到 Angular 12，我得到了同样的错误，我更正如下

卸载crypto-browserify并添加这行paths.crypto

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

在 angular.json 文件中将所有“aot”属性更改为 true，将 crypto-js 添加到 allowedCommonJsDependencies 并在脚本中添加路径“node_modules/crypto-js/crypto-js.js”(记得安装最新版本的crypto-js 使用 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
            }
        }
    }
}        

就是这样，这应该可以工作，并且不会再出现 crypto-js 警告