将Angular 5升级至6.rc0后出现打包异常问题

我帮你梳理下从Angular 5升级到6.0.0-rc.0后打包失败的常见排查点和修复方案，毕竟RC版本本身可能存在一些兼容性问题，咱们一步步来：

1. 统一依赖版本，修复潜在冲突 #

你的package.json里已经把核心Angular依赖升级到了6.0.0-rc.0，但@angular/cdk还停留在6.0.0-beta.5，版本不匹配很容易引发兼容性问题。建议把CDK也升级到6.0.0-rc.0，保持和主框架版本一致。另外，记得检查所有@angular开头的依赖（比如@angular/forms、@angular/platform-browser、@angular/router等）是否都同步升级到了6.0.0-rc.0，不要有遗漏的旧版本依赖。

之后重新执行依赖安装命令，确保没有peer依赖冲突：

npm install

安装过程中如果出现警告信息，一定要留意，这些往往是问题的根源。

2. 同步升级Angular CLI版本 #

Angular 6需要配套的CLI版本，旧版CLI无法正确处理Angular 6的项目配置。你可以先查看当前CLI版本：

ng --version

如果全局或本地CLI版本不是6.0.0-rc.x，需要分别升级：

• 全局CLI升级：

  npm install -g @angular/cli@6.0.0-rc.0
  

• 本地项目CLI升级：

  npm install @angular/cli@6.0.0-rc.0 --save-dev
  

升级完成后，务必运行CLI的配置迁移命令，Angular 6把旧的.angular-cli.json换成了angular.json，这一步能帮你自动更新配置：

ng update @angular/cli

3. 检查第三方依赖的兼容性 #

Angular 6带来了不少底层变化，比如RxJS升级到了6.x版本，导入方式完全改变；部分第三方UI组件库可能还没适配RC版本。

• RxJS迁移：如果项目中还在使用import 'rxjs/add/operator/map'这类旧导入方式，打包肯定会报错。你可以运行官方迁移工具自动修复：

  ng update rxjs
  

  如果还有残留问题，可以临时安装rxjs-compat包兼容旧代码：

  npm install rxjs-compat@6.0.0-rc.0 --save
  

• 第三方库检查：比如你用到的UI组件、工具库，要确认它们的版本是否支持Angular 6.0.0-rc.0，必要时升级这些库到兼容版本。

4. 定位具体错误信息 #

如果上面的步骤都试过还是不行，一定要仔细看ng build --prod输出的完整错误日志。举几个常见的场景：

• 如果报错Can't resolve '@angular/http'：Angular 6中@angular/http已被废弃，要替换成@angular/common/http，同时在模块中导入HttpClientModule替代原来的HttpModule。
• 如果出现语法错误：可能是某些代码使用了Angular 6不再支持的API，比如表单模块的部分方法变化，需要对照官方升级文档修改。

5. 清理缓存，重新构建 #

有时候缓存会导致一些莫名其妙的问题，你可以试试彻底清理后重新构建：

1. 删除node_modules文件夹：

   # macOS/Linux
   rm -rf node_modules
   # Windows
   rd /s /q node_modules
   

2. 删除package-lock.json文件：

   rm package-lock.json
   

3. 重新安装依赖：

   npm install
   

4. 清理Angular CLI缓存：

   ng cache clean
   

5. 再次尝试打包：

   ng build --prod
   

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