Angular项目webpack5缺失Node核心模块polyfill的配置问题咨询

1. polyfill相关配置的存放位置 #

Angular CLI默认封闭了webpack配置，无法直接修改webpack.config.js，webpack的resolve.fallback属于构建阶段配置，不能写在polyfill.ts中，需要通过自定义webpack构建器实现配置注入：

• 安装和Angular版本匹配的@angular-builders/custom-webpack依赖
• 在项目根目录新增自定义webpack配置文件写入fallback规则
• 修改angular.json中的构建配置，关联自定义webpack文件

2. polyfill.ts的实际作用 #

polyfill.ts是运行时API补全的入口文件，仅负责导入需要全局注入的浏览器兼容实现，比如ES2015+新语法的polyfill、浏览器未支持的Web API实现，不参与webpack构建规则的配置。你之前在该文件中导入dns模块的操作无法解决webpack构建阶段的模块解析错误。

3. 问题处理步骤 #

注意：sequelize是专为Node.js服务端设计的ORM，本身不支持浏览器端运行，仅解决编译问题无法使其在前端正常执行，建议优先调整技术方案，将数据库操作移至后端接口，前端仅调用接口完成数据交互。
如果仅需要临时解决编译报错，可按以下步骤操作：

1. 安装依赖

# 安装对应Angular 12版本的自定义webpack构建器
npm install @angular-builders/custom-webpack@12 --save-dev
# 安装需要的Node核心模块polyfill
npm install crypto-browserify assert --save-dev

2. 项目根目录新增webpack.custom.config.js文件，写入以下内容：

module.exports = {
  resolve: {
    fallback: {
      "crypto": require.resolve("crypto-browserify"),
      "assert": require.resolve("assert/"),
      // 浏览器无对应实现的模块直接设为false，使用空模块占位
      "fs": false,
      "pg-hstore": false,
      "dns": false
    }
  }
}

3. 修改angular.json配置
   找到projects -> 你的项目名 -> architect -> build节点：

• 将builder属性的值从@angular-devkit/build-angular:browser改为@angular-builders/custom-webpack:browser
• 在options节点下新增配置：

"customWebpackConfig": {
  "path": "./webpack.custom.config.js"
}

再找到projects -> 你的项目名 -> architect -> serve节点：

• 将builder属性的值从@angular-devkit/build-angular:dev-server改为@angular-builders/custom-webpack:dev-server

4. 重新执行ng serve即可解决编译报错。

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