NullInjectorError 试图使用 AngularFire答案

【问题标题】：NullInjectorError trying to use AngularFireNullInjectorError 试图使用 AngularFire
【发布时间】：2021-03-10 20:23:37
【问题描述】：

我正在尝试使用 AngularFire（我正在使用 Ionic Capacitor，只有 iOS 和 Android，没有 Web 应用程序）。

我按照教程添加了 angularfire 到我的应用程序中。当我运行时出现错误： Error: Uncaught (in promise) NullInjectorError: R3InjectorError(LoginPageModule) .... NullInjectorError: No provider for InjectionToken angularfire2.app.options!

这是我的登录页面模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { LoginPageRoutingModule } from './login-routing.module';

import { LoginPage } from './login.page';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { FirebaseService } from 'src/app/services/firebase.service';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    LoginPageRoutingModule,
    AngularFirestoreModule,
    AngularFireAuthModule
  ],
  providers: [
    FirebaseService
  ],
  declarations: [LoginPage]
})
export class LoginPageModule {}

这是 FirebaseService：

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFirestore } from '@angular/fire/firestore';

export interface User {
  uid: string
  displayName: string
  email: string
  photoURL: string
}

export interface Goal {
  id: string,
  dueDate: number,
  title: string,
  category: string,
  isAchieved: boolean,
  createdAt: number,
  createdBy: string,
}

@Injectable({
  providedIn: 'root'
})



export class FirebaseService {
  currentUser: User = null;


  constructor(private afAuth: AngularFireAuth, private afs: AngularFirestore) {
    this.afAuth.onAuthStateChanged(user => {
      console.log("Changed: ", user);
      this.currentUser = user;
    })
  }
}

我看到关于这个有多个线程，但似乎添加 AngularFirestore 和 AngularFireAuth 的导入修复了它，但在我的情况下不是。我做错了什么？

【问题讨论】：

这能回答你的问题吗？ No provider for InjectionToken angularfire2.app.options

标签： angular typescript ionic-framework

【解决方案1】：

您正在添加AngularFireModule，但我相信您添加不正确

试试下面

import { environment } from '../environments/environment';
...

import: [
  ...
  AngularFireModule.initializeApp(environment.firebase)
]

在你的环境文件中

export const environment = {
  production: false,
  firebase: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>',
    appId: '<your-app-id>',
    measurementId: '<your-measurement-id>'
  }
};

【讨论】：

【解决方案2】：

FirebaseService 具有 providedIn: 'root' 属性，但您将其添加到 LoginPageModule 的提供者数组中，因此您要创建此服务的两个实例。您必须从 LoginPageModule providers 数组中删除 FirebaseService。

【讨论】：