angular - 为什么我在我的 Angular 应用程序中获得 "Module not found: Error: Can' t resolve '@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 注入(inject)到我的构造函数中:

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 类(class)下载的，在我看来，这个运行良好的类(class)使用的是旧版本的 @angular/fire"(^5.2.1> 而不是我目前在我的项目中使用的 ^6.0.2。

Als 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';

(根据您自己提供的链接)。