@angular/fire导入AngularFireAuth无导出成员及兼容包报错如何解决

1. Angular Fire版本升级后的API变更：Angular Fire v7及以上版本，原@angular/fire/auth路径下的AngularFireAuth已经迁移到兼容层，旧路径不再导出该成员
2. TypeScript版本不兼容：所有.d.ts语法报错（模板字符串类型、元组标签等语法不识别）都是因为项目使用的TypeScript版本低于4.1，无法匹配新版本firebase和Angular Fire用到的TS新语法特性

• 第一步：升级TypeScript到4.2以上稳定版本，同时确认Angular版本和Angular Fire版本匹配
  执行命令：

  npm i typescript@~4.3 --save-dev
  

  升级完成后可执行ng version核对版本匹配关系
• 第二步：修正导入路径，你之前的导入路径缺少后缀，正确导入语句为：

  import { AngularFireAuth } from '@angular/fire/compat/auth';
  

• 第三步：核对AppModule的模块导入配置，确保已经引入兼容层Auth模块：
  先导入模块：

  import { AngularFireAuthModule } from '@angular/fire/compat/auth';
  

  再将AngularFireAuthModule加入@NgModule的imports数组中
• 第四步：清除缓存重新编译：
  删除项目下的node_modules文件夹和package-lock.json文件，重新执行npm install安装依赖，之后执行ng serve重启项目即可

如果是新开发项目，不需要兼容旧代码的情况下，可以直接使用Angular Fire v7+的原生新API，不需要引入兼容层：

• 导入语句改为：

  import { Auth } from '@angular/fire/auth';
  

• 直接注入Auth实例使用即可，基础用法和原AngularFireAuth一致，方法返回的Promise可通过rxjs的from方法转为Observable使用

内容的提问来源于stack exchange，提问作者Mukesh Maurya