Angular 项目构建 web3 报错 Module not found: Can't resolve XXX
某个 Angular 项目引入 web3 依赖时,构建出现了类似于下面的错误:
ERROR in ./node_modules/@pedrouid/iso-crypto/dist/cjs/helpers/env/node.js
Module not found: Error: Can't resolve 'crypto' in 'node_modules/@pedrouid/iso-crypto/dist/cjs/helpers/env'
ERROR in ./node_modules/@ethersproject/web/lib.esm/geturl.js
Module not found: Error: Can't resolve 'http' in 'node_modules/@ethersproject/web/lib.esm'
ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js
Module not found: Error: Can't resolve 'http' in 'node_modules/xhr2-cookies/dist'
ERROR in ./node_modules/@ethersproject/web/lib.esm/geturl.js
Module not found: Error: Can't resolve 'https' in 'node_modules/@ethersproject/web/lib.esm'
ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js
Module not found: Error: Can't resolve 'https' in 'node_modules/xhr2-cookies/dist'
resolve 'https' in 'node_modules/xhr2-cookies/dist'
ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js
Module not found: Error: Can't resolve 'os' in 'node_modules/xhr2-cookies/dist'
ERROR in ./node_modules/cipher-base/index.js
Module not found: Error: Can't resolve 'stream' in 'node_modules/cipher-base'
ERROR in ./node_modules/keccak/lib/api/keccak.js
Module not found: Error: Can't resolve 'stream' in 'node_modules/keccak/lib/api'
ERROR in ./node_modules/keccak/lib/api/shake.js
Module not found: Error: Can't resolve 'stream' in 'node_modules/keccak/lib/api'
ERROR in ./node_modules/@ethersproject/web/lib.esm/geturl.js
Module not found: Error: Can't resolve 'zlib' in 'node_modules/@ethersproject/web/lib.esm'
由于 Angular 主要是将项目按照浏览器规格进行构建,而报错的这几个 module 比如os
, stream
, fs
之流的是 Node API 提供的,在浏览器运行环境是不提供这几个 API 的,因此构建报错,找不到这些 Node 运行环境的 module。
Angular 底层使用 webpack,而 webpack 是支持 browserify 的,即在浏览器环境中填充部分 Node API,以便这些模块能在浏览器环境运行起来(如 web3.js 等等)。但是 Angular 本身的配置并不支持自定义 webpack 配置,因此我们需要通过打补丁的方案修正这个配置。
以下内容参考自 gist
package.json:
{...
"scripts": {
"postinstall": "node patch.js",
...
}
}
patch.js:
// Angular >= 11
const fs = require("fs");
const f =
"node_modules/@angular-devkit/build-angular/src/webpack/configs/browser.js";
fs.readFile(f, "utf8", function (err, data) {
if (err) {
return console.log(err);
}
var result = data.replace(
/node: false/g,
'node: {crypto: true, stream: true, fs: "empty"}'
);
fs.writeFile(f, result, "utf8", function (err) {
if (err) return console.log(err);
});
});
// ----
// For Angular <11
const fs = require("fs");
const f =
"node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js";
fs.readFile(f, "utf8", function (err, data) {
if (err) {
return console.log(err);
}
var result = data.replace(
/node: false/g,
"node: {crypto: true, stream: true}"
);
fs.writeFile(f, result, "utf8", function (err) {
if (err) return console.log(err);
});
});
// ----
重新npm i
之后再构建项目应该就可以修复这个错误了。
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!