Angular 5升级至Angular 6后Firebase 5报Observer泛型参数错误

这个问题本质是TypeScript版本兼容性和Firebase类型定义冲突导致的，不用降级Firebase的话，可以按以下步骤逐一排查解决：

1. 对齐TypeScript版本到Angular 6兼容的最高版本 #

Angular 6要求TypeScript版本在~2.7.2到<2.9.0之间，而新版本Firebase的类型定义可能需要TypeScript 2.8+的泛型支持。你可以升级TS到2.8.x版本：

npm install typescript@2.8.4 --save-dev

2. 移除冲突的@types/firebase依赖 #

如果你的项目之前安装过@types/firebase，新版本Firebase已经内置了官方类型定义，两者会产生冲突。执行以下命令卸载旧类型包：

npm uninstall @types/firebase --save-dev

3. 更新AngularFire库（如果使用了的话） #

如果你用了AngularFire来集成Firebase，必须确保它的版本和Angular 6、Firebase新版本匹配。Angular 6对应的AngularFire版本是5.0.0-rc.6及以上，执行更新：

npm install @angular/fire@5.0.0-rc.11 --save

（注：如果你的项目还在用旧包名angularfire2，可以直接替换为@angular/fire，这是官方新包名）

4. 调整tsconfig.json配置 #

打开项目根目录的tsconfig.json，修改compilerOptions：

• 确保lib数组包含es2017，因为Firebase的Observer类型依赖ES2017的特性：

  "compilerOptions": {
    "lib": ["es2017", "dom", ...]
  }
  

• 如果上述步骤后仍有错误，可以临时开启skipLibCheck跳过库类型检查（这是兜底方案，优先解决依赖匹配）：

  "compilerOptions": {
    "skipLibCheck": true
  }
  

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

最后，清理npm缓存并重新安装所有依赖，确保没有残留的旧版本文件：

npm cache clean --force
rm -rf node_modules package-lock.json
npm install

完成这些步骤后，重新运行ng serve应该就能解决TS2314的错误了。

内容的提问来源于stack exchange，提问作者Christophe Chenel