Angular 17集成Firebase登录页报错：NullInjectorError无angularfire2.app.options提供者

问题根源 #

报错NullInjectorError: No provider for InjectionToken angularfire2.app.options!是因为你使用了**@angular/fire/compat**（兼容旧版的SDK），但当前的app.config.ts仅配置了新版Modular SDK的提供者，compat模块依赖的旧版配置提供者缺失，导致无法找到必要的注入令牌。

解决方案 #

方案1：兼容现有compat代码（无需修改业务逻辑） #

修改app.config.ts，添加compat模块所需的配置提供者：

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
// 新版Modular SDK导入
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { getAuth, provideAuth } from '@angular/fire/auth';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
// compat模块导入
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';

// 替换为你的真实Firebase配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideClientHydration(),
    // 新版SDK配置
    importProvidersFrom(provideFirebaseApp(() => initializeApp(firebaseConfig))),
    importProvidersFrom(provideAuth(() => getAuth())),
    importProvidersFrom(provideFirestore(() => getFirestore())),
    // 添加compat模块的配置提供者，解决依赖缺失问题
    importProvidersFrom(AngularFireModule.initializeApp(firebaseConfig)),
    importProvidersFrom(AngularFireAuthModule)
  ]
};

方案2：迁移到新版Modular SDK（推荐，适配Angular 17） #

放弃compat模块，直接使用AngularFire的新版API，更适配Angular 17的独立组件模式：

1. 修改AuthService：

import { Injectable } from '@angular/core';
// 导入新版Auth API
import { Auth, signInWithEmailAndPassword } from '@angular/fire/auth';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(private auth: Auth, private router: Router) { }

  login(email: string, password: string) {
    signInWithEmailAndPassword(this.auth, email, password)
      .then(() => {
        localStorage.setItem('token', 'true');
        this.router.navigate(['/home']);
      })
      .catch(err => {
        alert(err.message);
        this.router.navigate(['/login']);
      });
  }
}

2. 保持app.config.ts的现有配置即可（无需添加compat相关导入），确保firebaseConfig为真实有效配置。

关键注意事项 #

• 务必替换firebaseConfig中的占位符为你在Firebase控制台获取的真实项目配置，否则即使配置正确也无法连接Firebase服务。
• Angular 17完全支持Firebase，问题出在compat模块与新版独立应用配置的兼容性，而非框架本身的支持问题。

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