AngularFirestore注入报错：No provider for InjectionToken angularfire2.app.options

我帮你排查了这个注入错误，问题主要出在混用不同版本的Angular Fire包以及模块配置不当上，下面是具体的解决步骤：

核心问题分析 #

你当前的代码同时引入了旧版的angularfire2包和新版的@angular/fire包，这两个包的依赖注入机制完全不同。错误里提到的InjectionToken angularfire2.app.options是旧版包的令牌，而新版@angular/fire已经不再使用它，导致DI容器找不到对应的提供者。另外，你手动在providers数组中添加AngularFirestore也是多余的，新版模块已经自动提供了该服务。

具体修复步骤 #

1. 统一Angular Fire包版本 #

首先卸载旧版的angularfire2，确保只使用官方维护的新版@angular/fire和firebase：

npm uninstall angularfire2
npm install @angular/fire firebase --save

2. 修正AppModule配置 #

修改app.module.ts，移除所有angularfire2相关导入，调整模块导入顺序，并移除多余的AngularFirestore提供者：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { environment } from '../environments/environment'
// 全部替换为@angular/fire的官方导入
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { GroupsComponent } from './groups/groups.component';
import { GroupComponent } from './groups/group/group.component';
import { GroupListComponent } from './groups/group-list/group-list.component'
import { GroupService } from './groups/shared/group.service';
import { FormsModule } from '@angular/forms'

@NgModule({
  declarations: [
    AppComponent,
    GroupsComponent,
    GroupComponent,
    GroupListComponent
  ],
  imports: [
    BrowserModule,
    // 必须先初始化Firebase应用，再导入其他Fire模块
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    AngularFireDatabaseModule,
    FormsModule
  ],
  providers: [GroupService], // 移除AngularFirestore，模块已自动提供
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 修正组件中的导入 #

确保group.component.ts中使用的是新版@angular/fire的AngularFirestore：

import { Component, OnInit } from '@angular/core';
import { GroupService } from '../shared/group.service';
import { NgForm } from '@angular/forms';
// 正确导入新版AngularFirestore
import { AngularFirestore } from '@angular/fire/firestore';

@Component({
  selector: 'app-group',
  templateUrl: './group.component.html',
  styleUrls: ['./group.component.css']
})
export class GroupComponent implements OnInit {

  constructor(private groupService: GroupService, private firestore: AngularFirestore) { }

  ngOnInit() {
    this.resetForm();
  }

  resetForm(form ?: NgForm){
    if(form!= null) form.resetForm();
    this.groupService.formData = {
      $key : null,
      firstname: '',
      lastname: '',
      age: null
    }
  }

  onSubmit(form : NgForm){
    let data = form.value;
    this.firestore.collection('groups').add(data);
    this.resetForm(form);
  }
}

4. 验证Firebase配置 #

检查src/environments/environment.ts中的firebaseConfig是否包含所有必要字段（从Firebase控制台复制的完整配置）：

export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: "你的API_KEY",
    authDomain: "你的AUTH_DOMAIN",
    projectId: "你的PROJECT_ID",
    storageBucket: "你的STORAGE_BUCKET",
    messagingSenderId: "你的MESSAGING_SENDER_ID",
    appId: "你的APP_ID"
  }
};

最后验证 #

完成上述修改后，重启Angular开发服务器：

ng serve

现在应该可以正常注入AngularFirestore并向Firestore插入数据了。

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