Angular 6升级后Webpack生产构建报错求助

我之前在把Angular项目从5升级到6时也碰到过完全一样的错误，根源是生产构建时webpack的模块id优化逻辑和rxjs 6的ESM模块结构不兼容，导致rxjs内部模块没有被正确分配id。下面是几个经过验证的解决办法，按从易到难的顺序尝试：

1. 修正rxjs的导入方式（优先尝试） #

即使安装了rxjs-compat，有些旧的导入语法在生产构建的tree-shaking过程中还是会触发问题。把所有旧的rxjs导入替换成rxjs 6的标准语法：

• 旧写法：import { Observable } from 'rxjs/Observable'
• 新写法：import { Observable } from 'rxjs'
• 对于操作符，比如map，旧写法import 'rxjs/add/operator/map'改成import { map } from 'rxjs/operators'，同时记得在pipe里使用：source$.pipe(map(...))

2. 调整webpack的模块id生成配置 #

如果是自定义webpack配置，生产模式下的模块id优化可能导致rxjs模块丢失id。修改webpack配置文件中的optimization部分：

module.exports = {
  // ...其他配置
  optimization: {
    moduleIds: 'deterministic', // 替代默认的'hashed'或者'named'
    // 若是较旧的webpack版本，改用HashedModuleIdsPlugin并配置context：
    // plugins: [
    //   new webpack.HashedModuleIdsPlugin({
    //     context: __dirname,
    //     hashFunction: 'sha256',
    //     hashDigest: 'hex',
    //     hashDigestLength: 4
    //   })
    // ]
  }
};

这个配置会确保每个模块生成稳定的id，避免rxjs内部模块被误处理。

3. 清理依赖缓存并重新安装 #

有时候依赖缓存会导致版本不兼容的问题，执行以下命令：

rm -rf node_modules
rm package-lock.json # 若使用yarn则删除yarn.lock
npm install

重新安装后再尝试生产构建。

4. 确认Angular和webpack版本兼容性 #

Angular 6要求webpack 4.x版本，如果你的webpack版本低于4，升级到兼容的版本：

npm install webpack@4.x --save-dev

同时确保@angular-devkit/build-webpack等相关工具包版本和Angular 6匹配。

完成以上步骤后再运行生产构建命令，应该就能解决这个错误了。

内容的提问来源于stack exchange，提问作者Mazlan Alam Malik