Angular 19中Webpack 5 polyfills错误的解决求助

你当前的配置存在几个关键问题，导致polyfill未生效，按以下步骤调整即可：

1. 修正webpack.config.js的语法错误 #

你的配置错误地将resolve.fallback放在了plugins数组内部，这会导致Webpack无法识别该配置。正确结构如下：

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

module.exports = {
  resolve: {
    fallback: {
      "path": require.resolve("path-browserify")
    }
  },
  plugins: [
    new NodePolyfillPlugin()
  ]
};

2. 让Angular加载自定义Webpack配置 #

Angular默认不会读取根目录的webpack.config.js，需要通过自定义构建工具集成：

• 安装依赖：

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

• 修改angular.json中的build和serve节点，替换构建器并指定配置文件路径：

  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      },
      // 保留原有其他配置
      "outputPath": "dist/e-mag",
      "index": "src/index.html",
      "main": "src/main.ts",
      "polyfills": ["zone.js"],
      // ...
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "browserTarget": "e-mag:build"
    }
  }
  

3. 尝试禁用不必要的polyfill #

如果你的项目并未直接使用path模块，只是第三方依赖（如serve-static）在浏览器环境中调用了它，可以直接禁用该polyfill来规避错误：

module.exports = {
  resolve: {
    fallback: {
      "path": false
    }
  }
};

4. 清理缓存并重新构建 #

缓存可能导致配置不生效，执行以下命令重置环境：

rm -rf node_modules package-lock.json
npm install
ng serve --clearCache

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