Webpack 5 Angular在Node.js中的Polyfill for Crypto-js

Question

我对webpack 5配置有一个基础问题，因为我没有任何经验。我想创建一个最简单的Angular应用程序，使用node.js模块crypto-js和SHA256。

在webpack 5之前，这很简单。您不必担心webpack，它就在后台运行。

在命令提示符中，我执行了以下操作： ng new TestApp -> cd TestApp -> npm install crypto-js -> npm install --save @types/crypto-js -> 编写导入SHA256的简单测试代码 -> 构建它并运行它！

现在我收到消息：

BREAKING CHANGE：webpack <5默认情况下会包含node.js核心模块的polyfill。这不再是这种情况。验证是否需要此模块并为其配置polyfill。

如果要包含polyfill，您需要： - 添加回滚'resolve.fallback: {"crypto":require.resolve("crypto-browserify")}' - 安装'crypto-browserify' 如果不想包含polyfill，可以使用空模块，如下所示： resolve.fallback: {"crypto":false}

我必须安装该模块并将此polyfill包含在配置文件中。 问题是如何编写最简单的webpack.config.js，将其放在哪里以及除这些行之外还包含什么？

敬礼

- ramijan

Answer 1

我曾遇到同样的问题，这是我在GitHub上找到的解决方案。 https://github.com/ChainSafe/web3.js/issues/4070

在您的项目目录中运行：

npm install crypto-browserify stream-browserify assert stream-http https-browserify os-browserify

tsconfig.json在："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"],
    }

- Nicolas

---

经过两天的搜索，我终于解决了使用Angular 12时没有加密的问题，尝试验证AWS Cognito JWT而不运行单独的节点服务器。非常感谢你。 - Sierra4x4

这对我来说也有效，除了加密。我的包@toruslabs/eccrypto依赖于它，我猜它没有看到覆盖。有什么想法吗？ - Calrocks

我在使用bcryptjs包和Angular 13时遇到了同样的问题。这个方法解决了警告。我还需要像Wahib Kerkeni的回复中解释的那样，在angular.json中添加"allowedCommonJsDependencies": ["crypto"]。 - Dario Vogogna

Answer 2

我升级到Angular 12后遇到了这个问题，经过搜索之后，我最终采取了以下措施：

在 tsconfig.json 文件中添加了：

    {
      "compilerOptions": {
        "paths":{
          "crypto":["node_modules/crypto-js"]
        }
     }
    }

并且在 angular.json 文件中，我添加了以下内容：

     {
    "architect": {
            "build": {
              "options": {
                "allowedCommonJsDependencies": ["crypto"], // note that this is the key of --> "crypto":["node_modules/crypto-js"]"
              }
            }
        }
    }

警告已经消失。 我希望这能帮到你。

- Wahib Kerkeni

---

你真是个高手！非常感谢。 - 1antares1

感谢。在 allowedCommonJsDependencies 中，我必须将其称为 crypto-js，因为这是我加载的 Node 模块。 - Mattijs

我必须使用以下代码："stream": [ "../node_modules/stream-browserify" ]请注意两个句点，因为我把"src"作为baseUrl。 - Chen Peleg

我曾经遇到过“stream”类似的问题。一开始我尝试了上面提到的解决方案，即使用"stream":["node_modules/readable-stream"]，但是没有成功。我甚至考虑过尝试为Angular使用自定义的webpack，但最终我尝试了"stream":["node_modules/stream-browserify"]，这个方法确实有效。谢谢！ - ole

Answer 3

以下步骤将帮助解决此问题。

• 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"]
  

^{注意：请阅读 browserify 的介绍。}

- sjsam

Answer 4

除了@Nicolas 的回答之外，我也遇到了“全局未定义”的问题。

为了解决这个问题，我不得不在“polyfills.ts”中添加以下行：

(window as any).global = window; 
(window as any).process = {
   env: {DEBUG: undefined},
};

- Chen Peleg

Answer 5

很遗憾，webpack配置被Angular隐藏了，只能让你访问AngularCli公开的一些选项。

但是，你可以使用包@angular-builders/custom-webpack，它非常好用。你可以替换一些webpack选项，而不会破坏Angular提供的全部配置。

因此，在您的情况下，您可以添加crypto-browserify作为"crypto"的后备方案。在这种情况下，webpack额外的配置文件将如下所示：

{ resolve: { fallback: { crypto: "./node_modules/crypto-browserify" } } }

- alljinx

Answer 6

虽然有点晚入局，但我的愚蠢错误可能会为某人节省大量时间。我在一个组件中意外地从express而不是从angular导入了router。这让我花了3天时间和一次偏头痛。

所以请检查一下，确保你没有意外地将node模块导入到你的angular组件中，就像这里一样。

- ALotLikeEs

Answer 7

如果你在使用Vue时遇到了这样的错误提示：'Module not found: Error: Can't resolve 'http' ...'，那么安装url-loader就可以解决问题。只需使用npm进行安装即可：npm install --save-dev url-loader。

- Robel