Angular 12: Firebase模块未正确提供(?)

Question

第一次使用 Firebase，所以不知道发生了什么。我没有修改使用 ng add @angular/fire 得到的配置，因此在我的 AppModule 中有以下内容：

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideFirestore(() => getFirestore()),
    provideAuth(() => getAuth()),
    provideDatabase(() => getDatabase()),
    provideFunctions(() => getFunctions()),
    provideMessaging(() => getMessaging()),
    provideRemoteConfig(() => getRemoteConfig()),
    provideStorage(() => getStorage()),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在另一个模块中，使用延迟加载，我调用方法signInWithEmailAndPassword（auth，email，password），但是控制台显示以下错误：

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).

我漏掉了什么？

- Igino Boffa

---

你有检查过这个吗？ - Apoorva Chikara

@ApoorvaChikara 相同的事情 - Igino Boffa

尝试将 AngularFireModule 添加到您的提供程序中，并将初始化器更改为 AngularFireModule.initializeApp(youConfig)。请检查是否有效。这些是通过 import { AngularFireModule } from '@angular/fire'; 导入的。 - Estevao Santiago

仍然无法工作 - Igino Boffa

我遇到了完全相同的问题，找不到任何文档或相关问题，兼容变体可以工作，但是有iOS问题只能通过不使用兼容版本来解决 :/ - Niels Van Haren

Answer 1

好的，我找到了这个问题的解决方案。

看起来你需要在你的服务中注入angularfire的auth实例。

import {Auth, sendPasswordResetEmail, signOut} from '@angular/fire/auth';

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

    constructor(..., private auth: Auth,) {
    }
    
     getFirebaseUser(): any {
        return this.auth.currentUser;
    }

    logout() {
        signOut(this.auth);
    }
    
    resetPassword(email: string) {
        return sendPasswordResetEmail(this.auth, email);
    }

    if (this.credentialsForm.valid) {
            signInWithEmailAndPassword(this.auth,this.credentialsForm.controls.email.value,
                this.credentialsForm.controls.password.value).then(result => { ... }
                }
}

使用此实例后，它像魔法一样工作。

- Niels Van Haren