Angular 13项目集成Firebase报AngularFireModule未提供错误

报错信息 #

Either AngularFireModule has not been provided in your AppModule (this can be done manually or implictly using provideFirebaseApp) or you're calling an AngularFire method outside of an NgModule (which is not supported)

环境信息 #

执行ng --version输出如下：

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 13.0.4
Node: 14.19.0
Package Manager: npm 6.14.16
OS: win32 x64

Angular: 13.0.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1300.4
@angular-devkit/build-angular   13.0.4
@angular-devkit/core            13.0.4
@angular-devkit/schematics      13.0.4
@angular/cli                    13.0.4

复现步骤 #

• 执行命令 ng new angular-fire && cd angular-fire 创建全新Angular项目
• 在Firebase控制台创建项目，开启Google身份认证功能
• 执行命令 ng add @angular/fire，安装时仅选择Authentication模块，命令自动更新app.module.ts与environment环境配置文件
• 编写登录页面与逻辑后启动项目，点击登录按钮触发报错

原有配置 #

app.module.ts #

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

import { AppComponent } from './app.component';
import { initializeApp,provideFirebaseApp } from '@angular/fire/app';
import { environment } from '../environments/environment';
import { provideAuth,getAuth } from '@angular/fire/auth';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => getAuth())
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html #

<div>
  <button (click)="signIn()">Sign in with Google</button>
</div>

app.component.ts #

import { Component } from '@angular/core';
import {
  getAuth,
  GoogleAuthProvider,
  signInWithPopup,
} from '@angular/fire/auth';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass'],
})
export class AppComponent {
  title = 'angular-fire';

  signIn() {
    return signInWithPopup(getAuth(), new GoogleAuthProvider())
      .then((result) => {
        const user = result.user;
        console.log(user);
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;

        console.log('errorCode', errorCode);
        console.log('errorMessage', errorMessage);
      });
  }
}

问题原因 #

AppModule中通过provideFirebaseApp、provideAuth初始化的Firebase实例是挂载在Angular依赖注入（DI）容器中的。原有代码在组件中直接手动调用getAuth()获取Auth实例，绕开了Angular的DI体系，AngularFire检测到该实例未经过NgModule初始化流程，就会抛出对应错误。
注：现有AppModule的配置完全正确，无需额外引入旧版AngularFireModule。

修复方案 #

修改app.component.ts，通过Angular DI获取已经初始化完成的Auth实例，不要手动调用getAuth()。
以Angular 13支持的inject写法为例，修改后代码如下：

import { Component, inject } from '@angular/core';
import {
  AUTH,
  GoogleAuthProvider,
  signInWithPopup,
} from '@angular/fire/auth';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass'],
})
export class AppComponent {
  title = 'angular-fire';
  private auth = inject(AUTH);

  signIn() {
    return signInWithPopup(this.auth, new GoogleAuthProvider())
      .then((result) => {
        const user = result.user;
        console.log(user);
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log('errorCode', errorCode);
        console.log('errorMessage', errorMessage);
      });
  }
}

如果偏好构造函数注入的写法，也可以用如下实现：

import { Component, Inject } from '@angular/core';
import {
  AUTH,
  Auth,
  GoogleAuthProvider,
  signInWithPopup,
} from '@angular/fire/auth';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass'],
})
export class AppComponent {
  title = 'angular-fire';

  constructor(@Inject(AUTH) private auth: Auth) {}

  signIn() {
    return signInWithPopup(this.auth, new GoogleAuthProvider())
      .then((result) => {
        console.log(result.user);
      })
      .catch((error) => {
        console.log(error.code, error.message);
      });
  }
}

修改保存后重新启动项目，点击登录按钮即可正常唤起Google登录弹窗。

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