Angular 6项目构建报错：无法解析path/stream内置模块

这个报错其实是Angular 6升级带来的Webpack版本变化导致的——Angular 6使用的Webpack 4不再自动为浏览器环境polyfill Node.js的核心模块（比如path和stream），而你的项目依赖的postcss、htmlparser2这些子依赖刚好引用了这些模块，所以Webpack就找不到对应的实现了。

下面是具体的解决步骤：

步骤1：安装浏览器兼容的polyfill包 #

首先需要安装对应模块的浏览器版本实现，打开终端执行：

npm install --save-dev path-browserify stream-browserify

步骤2：配置自定义Webpack规则 #

因为Angular CLI默认不允许直接修改Webpack配置，我们需要借助自定义构建工具来添加配置：

1. 安装@angular-builders/custom-webpack（注意要对应Angular 6的版本）：

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

2. 在项目根目录创建一个名为webpack.extra.js的文件，内容如下：

   module.exports = {
     resolve: {
       fallback: {
         "path": require.resolve("path-browserify"),
         "stream": require.resolve("stream-browserify")
       }
     }
   };
   

步骤3：修改Angular CLI配置 #

打开angular.json文件，找到architect下的build和serve配置，替换默认的builder并添加自定义Webpack配置：

替换build配置 #

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

替换serve配置 #

"serve": {
  "builder": "@angular-builders/custom-webpack:dev-server",
  "options": {
    "customWebpackConfig": {
      "path": "./webpack.extra.js"
    },
    // 保留你原来的其他配置（比如browserTarget等）
  }
}

可选：清理依赖重新安装 #

如果上面的步骤还没解决问题，可以尝试清理现有依赖后重新安装，避免版本冲突：

rm -rf node_modules package-lock.json
npm install

这样重新执行构建命令，应该就能正常编译了。

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