为什么我在我的 Angular 应用程序中收到“找不到模块：错误：无法解析‘@angular/fire/firestore/firestore’”错误消息？

Question

我对 Angular 和 Firebase\FireStore 很陌生，我发现在尝试将 Firestore 连接添加到我的项目时遇到了以下困难。

我正在按照官方文档将其添加到我的特定项目中：https : //github.com/angular/angularfire/blob/master/docs/install-and-setup.md

所以，首先，我通过 NPM 在我的项目中安装了 AngularFire：

npm install --save firebase @angular/fire

然后我做了：

ng add @angular/fire

然后我以这种方式配置了我的/src/environments/environment.ts文件：

export const environment = {
  production: false,
  firebase: {
    apiKey: "MY-API-KEY",
    authDomain: "soc-dashboard.firebaseapp.com",
    databaseURL: "https://soc-dashboard.firebaseio.com",
    projectId: "soc-dashboard",
    storageBucket: "soc-dashboard.appspot.com",
    messagingSenderId: "801320773797"
    //appId: "1:801320773797:web:14e69306da7b0838d4c54c",
    //measurementId: "G-BHVTXG6CY4"
  }
};

然后我以这种方式配置了我的/src/app/app.module.ts文件：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';    
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FullCalendarModule } from 'primeng/fullcalendar';
import { HttpClientModule } from '@angular/common/http'
import { FullcalendarComponent } from './fullcalendar/fullcalendar.component';
import { EventService } from './event.service';
import { PeopleListComponent } from './people-list/people-list.component';  
import { FormsModule } from '@angular/forms';
import { DropdownModule, OrderListModule, CalendarModule, ConfirmDialog, ConfirmDialogModule, ConfirmationService } from 'primeng';
import {SelectButtonModule} from 'primeng/selectbutton';
import { CommonModule } from '@angular/common';
import { CustomEventDateSelectorComponent } from './custom-event-date-selector/custom-event-date-selector.component';
import { AngularFireModule } from '@angular/fire';
import { environment } from 'src/environments/environment';
import {AngularFireAuthModule} from '@angular/fire/auth';
import {AngularFirestoreModule} from '@angular/fire/firestore';
  
@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FullcalendarComponent,
    PeopleListComponent,
    CustomEventDateSelectorComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    BrowserAnimationsModule,
    DropdownModule,
    OrderListModule,
    SelectButtonModule,
    CalendarModule,
    ConfirmDialogModule,
    AppRoutingModule,
    FullCalendarModule,
    HttpClientModule,
    CommonModule,

    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AngularFirestoreModule
  ],
  providers: [EventService, ConfirmationService],
  bootstrap: [AppComponent]
})
export class AppModule { }

如您所见，我通过以下方式配置了AngularFireModule：

AngularFireModule.initializeApp(environment.firebase)

这应该使用定义到我的/src/environments/environment.ts文件中的environment.firebase部分。

最后在我的项目中，我有这个EventService服务类：

import { Injectable } from '@angular/core';
//import { Http } from '@angular/http';
import { HttpClientModule, HttpClient } from '@angular/common/http'
import { BehaviorSubject, Observable } from 'rxjs';
import { AngularFirestore } from '@angular/fire/firestore/firestore';


@Injectable()
export class EventService {

  //private events = [];

  private events = [
    {id: 1, title: 'All Day Event', start: '2017-02-01'},
    {id: 2, title: 'Long Event', start: '2017-02-07', end: '2017-02-10'},
    {id: 3, title: 'Repeating Event', start: '2017-02-09T16:00:00'},
    {id: 3, title: 'test', start: '2017-02-20T07:00:00'},
  ];


  private people = [
    {id: 1, name: "PERSONA 1"},
    {id: 2, name: "PERSONA 2"},
    {id: 3, name: "PERSONA 3"},
    {id: 4, name: "PERSONA 4"},
    {id: 5, name: "PERSONA 5"},
  ];

  items: Observable<any[]>;

  public eventData = new BehaviorSubject(this.events);

  constructor(private http: HttpClient,
              private db: AngularFirestore) {}

  getEvents(): Observable<any[]> {
    return this.eventData.asObservable();
  }

  getItems(): Observable<any[]> {
    this.items = this.db.collection('calendar').valueChanges();

    return this.items;
  }


  addEvent(event) {
    console.log(event.event.end);
    const newEvent = {id: 5, title: event.event.title, start: event.event.start, end: event.event.end};
    event.event.remove();
    this.events.push(newEvent);
    this.eventData.next([...this.events]);
  }

  removeEventById(event:any): Observable<any[]>  {
    this.events=this.events.filter(each=>each.id!=event.id);
    console.log("EVENTS: " + this.events);
    //event.remove();
    let eventData = new BehaviorSubject(this.events);
    this.eventData.next(this.events);
    return this.eventData.asObservable();
  }


  getPeople(): Promise<any[]> {
    return Promise.all(this.people)
        .then(res => {
          console.log(res);
          return res;
        })
  }

}

正如你在这个类中看到的，我将AngularFirestore注入到我的构造函数中：

constructor(private http: HttpClient,
            private db: AngularFirestore) {}

然后我尝试使用它以这种方法从我的FireStore数据库中检索数据：

getItems(): Observable<any[]> {
    this.items = this.db.collection('calendar').valueChanges();
    return this.items;
}

问题是，当我尝试通过ng serve命令执行我的项目时，我收到以下错误消息：

ERROR in ./src/app/event.service.ts
Module not found: Error: Can't resolve '@angular/fire/firestore/firestore' in '/home/developer/Documents/Angular-WS/SOC-Calendar/src/app'
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

我不明白为什么。

这是我的package.json文件内容：

{
  "name": "soc-calendar",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^9.1.6",
    "@angular/cdk": "^9.2.3",
    "@angular/common": "~9.1.4",
    "@angular/compiler": "~9.1.4",
    "@angular/core": "~9.1.4",
    "@angular/fire": "^6.0.2",
    "@angular/forms": "~9.1.4",
    "@angular/http": "^7.2.16",
    "@angular/platform-browser": "~9.1.4",
    "@angular/platform-browser-dynamic": "~9.1.4",
    "@angular/router": "~9.1.4",
    "@fullcalendar/core": "^4.4.0",
    "@fullcalendar/daygrid": "^4.4.0",
    "@fullcalendar/interaction": "^4.4.0",
    "@fullcalendar/list": "^4.4.0",
    "@fullcalendar/timegrid": "^4.4.0",
    "bootstrap": "^4.5.0",
    "chart.js": "^2.9.3",
    "firebase": "^7.15.5",
    "font-awesome": "^4.7.0",
    "primeicons": "^3.0.0-rc.1",
    "primeng": "^9.0.6",
    "quill": "^1.3.7",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.4",
    "@angular/cli": "~9.1.4",
    "@angular/compiler-cli": "~9.1.4",
    "@angular/language-service": "~9.1.4",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3",
    "@angular-devkit/architect": ">= 0.900 < 0.1100",
    "firebase-tools": "^8.0.0",
    "fuzzy": "^0.1.3",
    "inquirer": "^6.2.2",
    "inquirer-autocomplete-prompt": "^1.0.1",
    "open": "^7.0.3"
  }
}

我曾使用 AngularFire 处理过一个以前的 Angular 项目。这个项目运行良好，是从 Udemy 课程下载的，在我看来，这个运行良好的项目使用了最旧版本的@angular/fire”（^5.2.1而不是我目前在我的应用程序中使用的^6.0.2项目）。

旧工作项目的node_modules/@angular/fire/firestore/内容似乎与我的实际项目大不相同，这给了我这个问题。实际上：

这是旧工作项目的目录内容：

这是我新的有问题的项目中同一目录的内容：

正如你所看到的，旧的工作项目包含更多的文件，尊重新的，包括我的新项目中不存在的firestore.js和firestore.module.js文件。

怎么了？我错过了什么？我该如何解决这个问题？

Answer 1

你有

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

而在官方文档中，导入语句是

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

（根据您自己提供的链接）。