Angular13导入AngularFireModule等模块提示无导出成员报错

• 你当前安装的@angular/fire@7.2.0是适配Firebase 9 模块化SDK的版本，从v7版本开始，默认入口不再导出旧版（v6及更早）的AngularFireModule、AngularFirestoreModule这类NG模块类，你写的导入路径是旧版用法，自然会提示无对应导出成员。
• 原代码存在额外写法错误：就算沿用旧版模块逻辑，initializeApp初始化方法是根模块AngularFireModule的静态方法，你原代码里把这个方法挂在AngularFirestoreModule上调用，本身逻辑也不成立。
• 你当前选用的Angular 13.3.7、@angular/fire 7.2.0、firebase 9.8.2三个版本是完全兼容的，不需要做版本降级处理。

你可以二选一，第一种改动最小，第二种是官方推荐的新写法，打包体积更优。

方案1：使用compat兼容层（改动量最小） #

v7版本保留了兼容层入口，只需要修改导入路径，同时修正初始化方法的调用对象即可，原有业务代码不需要改动。

1. 把原来的两行AngularFire相关导入替换为compat路径的导入：

// 替换旧的导入
// import { AngularFireModule } from '@angular/fire';
// import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';

2. 修正@NgModule的imports数组里的初始化逻辑，把原来错误挂在AngularFirestoreModule上的initializeApp移到AngularFireModule下。
   修正后的完整app.module.ts代码参考：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DatePipe } from '@angular/common';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TaskComponent } from './components/task/task.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import {MatCardModule} from '@angular/material/card';
import {MatButtonModule} from '@angular/material/button';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { environment } from 'src/environments/environment';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';

@NgModule({
  declarations: [
    AppComponent,
    TaskComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatButtonModule,
    FormsModule,
    ReactiveFormsModule,
    // 修正初始化调用对象
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule
  ], 
  providers: [DatePipe],
  bootstrap: [AppComponent]
})
export class AppModule { }

方案2：使用v7原生模块化API（官方推荐，包体积更小） #

v7版本默认提供的是函数式的提供者写法，适配Angular的摇树优化机制，打包后产物体积更小，不需要导入旧风格的Module类。
直接替换AngularFire相关的导入和imports数组内容即可，完整代码参考：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DatePipe } from '@angular/common';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TaskComponent } from './components/task/task.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import {MatCardModule} from '@angular/material/card';
import {MatButtonModule} from '@angular/material/button';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { environment } from 'src/environments/environment';
// 新的模块化API导入
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';

@NgModule({
  declarations: [
    AppComponent,
    TaskComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatButtonModule,
    FormsModule,
    ReactiveFormsModule,
    // 函数式初始化配置
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
    provideFirestore(() => getFirestore())
  ], 
  providers: [DatePipe],
  bootstrap: [AppComponent]
})
export class AppModule { }

注意：使用原生模块化API时，组件中调用Firestore的方法也需要从对应模块化入口导入，不再支持从注入的AngularFirestore实例上调用旧版方法。

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