如何让erdJs在Angular 12中正常运行？求修复方案及解决办法

云上老周

2026-4-30

解决Angular 12（Webpack 5）中erdJs依赖Node.js模块的报错问题

我之前升级到Angular 12时也碰到过一模一样的问题——Webpack 5移除了对Node.js核心模块（比如fs）的默认polyfill，导致erdJs这类依赖Node API的库构建失败。你之前尝试的browserify包方向是对的，但还缺了关键的Webpack配置步骤，试试下面的完整方案：

第一步：安装必要依赖
除了你已经装的包，还需要加上fs-browserify（专门给浏览器环境polyfill fs）和自定义Webpack构建器（因为Angular默认不允许直接修改Webpack配置）：
```
npm install @angular-builders/custom-webpack fs-browserify os-browserify --save-dev
```

第二步：创建自定义Webpack配置文件
在项目根目录新建webpack.config.js，添加以下内容，告诉Webpack在浏览器环境下用polyfill替代Node核心模块：

module.exports = {
  resolve: {
    fallback: {
      "fs": require.resolve("fs-browserify"),
      "os": require.resolve("os-browserify/browser"),
      "path": require.resolve("path-browserify"),
      "crypto": require.resolve("crypto-browserify"),
      "stream": require.resolve("stream-browserify")
    }
  }
};

第三步：修改Angular构建配置
打开angular.json，把项目的build和serve builder换成自定义Webpack构建器，并指定配置文件路径：
找到projects -> [你的项目名] -> architect -> build，修改如下：

"build": {
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
    "customWebpackConfig": {
      "path": "./webpack.config.js"
    },
    // 保留你原有的其他配置（outputPath、index、main等）
  }
}

同样修改serve部分：

"serve": {
  "builder": "@angular-builders/custom-webpack:dev-server",
  "options": {
    "customWebpackConfig": {
      "path": "./webpack.config.js"
    },
    // 保留原有配置
  }
}

第四步：修复TypeScript类型报错
在tsconfig.json的compilerOptions里添加node类型，避免Node API相关的类型提示错误：
```
"compilerOptions": {
  // 原有配置...
  "types": ["node"]
}
```

做完这些步骤后，再运行ng build或ng serve应该就能解决fs模块找不到的问题了。

补充说明：你之前只在tsconfig.json的paths里配置是不够的，因为那只是TypeScript的路径解析规则，Webpack 5的模块解析逻辑是独立的，必须通过resolve.fallback明确指定polyfill替代方案。另外，建议确认你的erdJs是最新版本，新版本通常会对浏览器环境有更好的兼容支持。

内容的提问来源于stack exchange，提问作者Razvan M.