Angular 4升级至Angular 5遇第三方包报错，求正确升级流程

一、升级前必做的准备 #

• 先把当前所有第三方依赖的版本记死——要么直接看package.json，要么跑npm list导出一份清单，后续对比排查用得着。
• 逐个查第三方包的兼容性：
  • 像Angular封装的组件（比如datatable这类），必须确认它有支持Angular 5的版本，直接看包的README或者npm页面的版本说明，别瞎升级。
  • 纯JS库比如lodash、jquery，一般兼容性没问题，但也要看最新稳定版有没有废弃你用到的API，避免升级后代码跑不起来。
• 备份项目！用Git开个新分支，或者直接复制整个项目文件夹，翻车了能快速回滚，别省这一步。

二、先更核心，再理第三方 #

别上来就全量升级，先把Angular核心套件搞定：

1. 升级Angular核心包：
   执行这条命令统一把核心包更到5.x版本：

   npm install @angular/core@5 @angular/common@5 @angular/compiler@5 @angular/platform-browser@5 @angular/platform-browser-dynamic@5 @angular/router@5 @angular/forms@5 --save
   

2. 配套工具也要同步更：
   如果用Angular CLI，得更到1.7.x系列（和Angular 5匹配）：

   npm install @angular/cli@1.7.x --save-dev
   

3. TypeScript版本必须对应：
   Angular 5要求TypeScript 2.4.x，别用错版本：

   npm install typescript@2.4.x --save-dev
   

三、批量处理第三方依赖，避免连环坑 #

• 直接换掉明确不兼容的包：
  比如旧版Angular datatable不支持5，要么找社区适配过的fork版，要么换个官方推荐的表格组件，别死磕一个废弃包。
• 统一更新后盯紧警告：
  跑npm update之后，终端的警告信息别忽略！里面会直接告诉你哪个包和当前Angular版本不兼容，先处理这些高优先级的。
• 清理缓存解决玄学问题：
  要是遇到莫名其妙的报错，直接删node_modules、package-lock.json，再跑npm cache clean --force，最后重新npm install——很多时候是缓存搞的鬼。

四、编译调试的实用技巧 #

• 增量编译排查：别一上来全量编译，先编译没有第三方依赖的核心模块，没问题再逐步加有第三方组件的模块，快速定位哪个包出问题。
• 类型定义要跟上：
  很多报错是@types/xxx的问题，比如@types/lodash、@types/jquery要更到和包版本匹配的类型定义，要是找不到适配的，暂时可以在tsconfig.json里把包加到types数组，或者用// @ts-ignore临时跳过（别长期用，后续还是要找适配的类型）。
• 开TypeScript严格模式提前排错：
  在tsconfig.json里逐步开启noImplicitAny、strictNullChecks这类选项，能提前揪出类型不兼容的问题，比编译报错了再查高效多了。

五、升级后别忘了验证 #

• 跑通所有单元测试和E2E测试，确保功能没崩。
• 控制台的废弃API警告要处理掉，别留到下次升级再踩坑。
• 把这次升级的依赖变更记下来，下次升级直接参考，省得再踩一遍。

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