Angular独立组件HomeComponent出现NullInjectorError，AngularFireAuth注入失败求助

看了你的错误信息和代码，问题出在**AngularFireAuth（compat版本）和你当前使用的AngularFire新模块化提供者不匹配**，导致依赖注入容器找不到angularfire2.app.options这个令牌。

先拆解错误：NullInjectorError提示找不到InjectionToken angularfire2.app.options，这是因为你在AuthenticationService里用了兼容版的AngularFireAuth，但你的app.config.ts里配置的是AngularFire 7+之后的新模块化提供者（provideFirebaseApp、provideAuth），两者的依赖体系不一样。

给你两个解决方案，选一个适合你的就行：

方案一：切换到AngularFire新的非兼容API（推荐，符合当前Angular独立组件的生态） #

这个方案不需要用compat包，直接用Firebase Auth的原生实例，和你现有的app.config配置完全匹配：

1. 修改AuthenticationService，替换导入和依赖：

import { Injectable } from '@angular/core';
// 导入新的Auth模块和方法，移除compat依赖
import { Auth, signOut, signInWithEmailAndPassword, createUserWithEmailAndPassword } from '@angular/fire/auth';
import { FirebaseError } from 'firebase/app';
import { catchError, from, Observable, throwError } from 'rxjs';

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

    // 注入Firebase Auth的原生实例，而非compat版的AngularFireAuth
    constructor(private auth: Auth) { }

    signIn(email: string, password: string): Observable<any>{
        return from(signInWithEmailAndPassword(this.auth, email, password))
        .pipe(
            catchError((error: FirebaseError) =>
                throwError(() => console.log('Errore'))
            )
        );
    }

    signUp(email: string, password: string): Observable<any>{
        return from(createUserWithEmailAndPassword(this.auth, email, password)).pipe(
            catchError((error: FirebaseError) =>
                throwError(() => console.log('Errore'))
            )
        );
    }

    signOut(): Observable<void> {
        return from(signOut(this.auth)).pipe(
            catchError((error: FirebaseError) =>
                throwError(() => console.log('Errore'))
            )
        );
    }
}

2. 你的app.config.ts配置不需要修改，保持现有内容即可——provideAuth(() => getAuth())已经正确提供了Auth实例，能被AuthenticationService正常注入。

方案二：继续使用兼容版AngularFireAuth #

如果你因为历史代码原因必须保留compat包，需要在app.config.ts中手动添加AngularFireAuth的提供者，让依赖注入容器能找到它：

1. 先在app.config.ts中导入兼容版的AngularFireAuth：

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

2. 在providers数组中添加AngularFireAuth的工厂提供者：

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideClientHydration(),
    provideHttpClient(withFetch()),

    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
    provideAuth(() => getAuth()),
    provideFirestore(() => getFirestore()),
    // 新增：手动提供AngularFireAuth实例，依赖已有的Auth实例
    {
      provide: AngularFireAuth,
      useFactory: (auth: Auth) => new AngularFireAuth(auth),
      deps: [Auth]
    }
  ]
};

这样就能解决NullInjectorError的问题，依赖注入容器会正确找到AngularFireAuth的实例。

额外检查点 #

• 确保environment.ts里的firebaseConfig确实正确导出，并且包含apiKey、authDomain、projectId等Firebase项目的必填配置字段；
• 你的HomeComponent是standalone: true，但AuthenticationService用了providedIn: 'root'，这点是没问题的——根级提供者可以被所有组件（包括独立组件）正常注入。

试一下上面的方案，应该能解决你的问题！

备注：内容来源于stack exchange，提问作者Riccardo