Angular项目安装@cardano-sdk/core时path模块解析失败求助

核心问题原因 #

Angular 14基于Webpack 5构建，而Webpack 5不再默认提供Node.js核心模块的polyfill。你直接修改根目录的webpack.config.js不会生效，因为Angular CLI默认不会读取该文件，必须通过自定义Webpack配置来覆盖默认设置。

解决步骤 #

1. 安装自定义Webpack构建工具 #

安装与Angular 14版本匹配的自定义Webpack构建依赖：

npm install --save-dev @angular-builders/custom-webpack@14

2. 修改angular.json配置 #

找到angular.json中architect.build和architect.serve节点，替换为自定义Webpack的构建器：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      },
      // 保留原有的outputPath、index、main等其他配置项
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "browserTarget": "tez-front:build"
    }
  }
}

3. 调整Webpack配置文件 #

更新webpack.config.js，补充完整的fallback配置和必要插件：

const webpack = require('webpack');

module.exports = {
  resolve: {
    fallback: {
      "path": require.resolve("path-browserify"),
      "fs": false,
      "buffer": require.resolve("buffer/")
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer']
    })
  ]
};

4. 确认依赖安装 #

确保所有所需polyfill依赖已安装：

npm install --save-dev path-browserify buffer

5. （可选）补充全局polyfill #

若仍存在Buffer相关报错，在src/polyfills.ts中添加全局声明：

import { Buffer } from 'buffer';
(window as any).Buffer = Buffer;

测试运行 #

执行ng serve重启项目，即可正常编译。

内容的提问来源于stack exchange，提问作者Lilit Mazmanyan