离子火库找不到模块“@angular/fire/firestore”

Question

我正在像这样导入 Angularfirestore

import { AngularFirestore } from '@angular/fire/firestore';

它显示错误错误：找不到模块“@angular/fire/firestore”。

"firebase": "^4.13.1",
"angularfire2": "^5.0.0-rc.4",
"rxjs": "^6.0.0",
"rxjs-compat": "^6.1.0",

app.module.ts

import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { firebaseConfig } from './credentials';

Answer 1

你已经用命令安装了

npm install firebase angularfire2

AngularFirestore 的导入是

import { AngularFirestore } from 'angularfire2/firestore';

你的 app.module 有如下导入：~

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { environment } from '../environments/environment';

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

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule.enablePersistence()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

您需要使用以下导入将 AngularFirestore 可注入组件注入到您的组件中：

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

@Component({ ... })
export class AppComponent {
  constructor(private afs: AngularFirestore) {
    // ...
  }
}

您的 enviornment.ts 可以有您的 firebase 配置，如下所示：~

在你的情况下是import { firebaseConfig } from './credentials';

export const environment = {
  production: false,
  firebase: {
    apiKey: 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
    authDomain: 'your-project-id.firebaseapp.com',
    databaseURL: 'https://your-project-id.firebaseio.com',
    projectId: 'your-project-id',
    storageBucket: 'your-project-id.appspot.com',
    messagingSenderId: 'XXXXXXXXXXXX'
  }
};