未知的加密、操作系统、http、https 库，具有 Angular 17 和新的 eslint 版本

Question

我们尝试将我们的加密应用程序升级到 Angular 17 和新的 esbuild。不幸的是我们遇到了这个问题

✘ [ERROR] Could not resolve "crypto"

    node_modules/@toruslabs/eccrypto/dist/eccrypto.esm.js:1:23:
      1 │ import nodeCrypto from 'crypto';
        ╵                        ~~~~~~~~

  The package "crypto" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

我们已经像以前一样在 tsconfig.json 文件中配置了路径

"paths": {
      "crypto": [
        "node_modules/crypto-browserify"
      ],
      "stream": [
        "node_modules/stream-browserify"
      ],
      "os": [
        "node_modules/os-browserify"
      ],
      "https": [
        "node_modules/https-browserify"
      ],
      "http": [
        "node_modules/stream-http"
      ],
      "url": [
        "node_modules/url"
      ]
    },

不幸的是，这似乎只适用于在

src

下加载的打字稿文件，所以文件是我们自己开发的。但是这个问题是由我们安装和需要的库引发的。不仅仅是这个库，还有其他库，而且不仅仅是

crypto

库。

node_modules/dropbox/dist/Dropbox-sdk.min.js:706:204:
node_modules/eth-lib/lib/bytes.js:7:201:
node_modules/web3-eth-accounts/lib/index.js:27:82:

IMO 这应该是与 Angular esbuild 捆绑器相关的问题

Answer 1

您遇到的错误表明 Angular 应用程序中的 esbuild 未解析“crypto”包。发生这种情况是因为 esbuild 被设计为在类似浏览器的环境中运行，并且某些特定于 Node.js 的包（如“crypto”）可能不完全兼容。

您可以采取以下几个步骤来解决此问题：

1. 更新依赖项： 确保项目的所有依赖项都是最新的，尤其是 Angular、esbuild 以及任何依赖于 Node.js 特定包的库。

   ng update
   

2. 检查 esbuild 配置： 确保您的 esbuild 配置设置正确。如果您有自定义 esbuild 配置，请确保它与 Angular 兼容并且不会干扰捆绑过程。

3. 使用 Angular Builder： 如果您没有使用默认的 Angular 构建器，请考虑切换回它。默认构建器与 Angular 集成良好，不太可能导致兼容性问题。

   在您的

   angular.json

   文件中，确保构建器设置为

   @angular-devkit/build-angular:browser

   。

   "architect": {
     "build": {
       "builder": "@angular-devkit/build-angular:browser",
       ...
     }
   }
   

4. 检查库兼容性： 验证您使用的库是否与 Angular 和 esbuild 兼容。某些库可能对某些捆绑程序有特定要求或已知问题。

   如果库导致问题，请检查是否有更新版本或是否有任何配置选项可以帮助解决问题。

5. 替代加密库： 如果问题仍然存在，请考虑使用与浏览器环境更兼容的替代加密库。例如，您可以将“crypto”包替换为“crypto-browserify”或其他浏览器友好的替代方案。

   安装浏览器友好的加密库：

   npm install crypto-browserify
   

   更新您的 tsconfig.json 路径：

   "paths": {
     "crypto": [
       "node_modules/crypto-browserify"
     ],
     ...
   }
   

6. 联系库维护人员： 如果引起问题的库被社区广泛使用和维护，请检查是否有任何 GitHub 问题或与 Angular 和 esbuild 兼容性相关的讨论。库维护人员可能对如何解决问题有见解或提供指导。

请记住仔细查看每个库和 Angular 的文档和发行说明，以确保兼容性并解决任何重大更改。