Angular Firebase项目中EnvironmentProviders与ImportProvidersSource类型不兼容问题求助

这个错误是因为Angular独立应用API与@angular/fire版本不兼容，或配置方式错误导致的，以下是具体解决方案：

1. 修正配置代码 #

在Angular独立应用（使用ApplicationConfig）中，provideFirebaseApp、provideFirestore这类@angular/fire提供的函数，本身就返回EnvironmentProviders类型的提供者，无需用importProvidersFrom包裹。直接将它们加入providers数组即可：

export const appConfig: ApplicationConfig = {
  providers: [
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideFirestore(() => getFirestore()),
    provideRouter(routes)
  ],
};

2. 检查版本兼容性 #

确保@angular/fire版本与Angular主版本匹配：

• Angular 16 → @angular/fire 7.6.x 及以上
• Angular 17 → @angular/fire 7.7.x 及以上
• Angular 18 → @angular/fire 7.8.x 及以上

通过以下命令查看当前版本：

# 查看Angular版本
ng version
# 查看@angular/fire版本
npm list @angular/fire

若版本不匹配，执行升级命令：

npm install @angular/fire@latest firebase@latest

3. 错误原因说明 #

importProvidersFrom的作用是将NgModule（或ModuleWithProviders）转换为独立应用可用的提供者。而@angular/fire从7.6版本开始，针对独立应用提供的provideXXX函数已经直接返回EnvironmentProviders，无需再经过importProvidersFrom转换，强行包裹会触发类型不匹配错误。

内容的提问来源于stack exchange，提问作者Igor Urdenko