如何为Angular项目添加Angularfire2？注入AngularFirestore遇错求助

你遇到的核心问题是AngularFire2版本与Angular 5不兼容——最新版的AngularFire2已经不再支持Angular 5，直接安装会出现依赖不匹配或Provider找不到的报错。结合你的环境信息，给你以下具体解决方案：

1. 安装适配Angular 5的AngularFire2和Firebase版本 #

首先卸载当前的不兼容版本，重新安装经过验证的适配版本：

npm uninstall angularfire2 firebase --save
npm install angularfire2@5.0.0-rc.6 firebase@4.12.1 --save

这个版本组合完全适配Angular 5.x系列，能避免版本不兼容带来的各种问题。

2. 检查根模块的配置是否正确 #

确保你在AppModule中正确导入了AngularFireModule和AngularFirestoreModule，这是成功注入AngularFirestore的必要前提：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';

import { AppComponent } from './app.component';

// 替换成你的Firebase项目配置
const firebaseConfig = {
  apiKey: "你的API_KEY",
  authDomain: "你的AUTH_DOMAIN",
  databaseURL: "你的DATABASE_URL",
  projectId: "你的PROJECT_ID",
  storageBucket: "你的STORAGE_BUCKET",
  messagingSenderId: "你的MESSAGING_SENDER_ID"
};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFirestoreModule // 必须导入该模块，否则无法识别AngularFirestore的Provider
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 组件中正确注入AngularFirestore #

在需要使用的组件中，按照以下方式导入并注入：

import { Component } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private afs: AngularFirestore) {
    // 可添加测试代码验证功能是否正常
    this.afs.collection('test-collection').valueChanges().subscribe(data => {
      console.log('Firestore数据:', data);
    });
  }
}

4. 清理缓存重置依赖（可选） #

如果执行以上步骤后仍有报错，可能是npm缓存或依赖冲突导致的，执行以下命令重置依赖环境：

npm cache clean --force
rm -rf node_modules package-lock.json
npm install

完成以上操作后，应该就能正常注入并使用AngularFirestore了。

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