Why am I obtaining "Module not found: Error: Can't resolve '@angular/fire/firestore/firestore' " error message in my Angular app?

Why am I obtaining "Module not found: Error: Can't resolve '@angular/fire/firestore/firestore' " error message in my Angular app?

我是 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 服务 class:

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;
        })
  }

}

正如您在此 class 中看到的,我正在将 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.jsfirestore.module.js 我的新项目中不存在的文件。

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

你有

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

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

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

(根据link你自己提供)

原因是;在您的 package.json 中,您有 Angular v9,它不支持 AngularFireModule。最好的方法是将 angular 依赖项复制到下面,它将起作用

    {
  "name": "old",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/fire": "^5.2.1",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@ionic-native/android-permissions": "^5.21.5",
    "@ionic-native/camera": "^5.21.5",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/diagnostic": "^5.21.5",
    "@ionic-native/geolocation": "^5.21.5",
    "@ionic-native/location-accuracy": "^5.24.0",
    "@ionic-native/native-audio": "^5.24.0",
    "@ionic-native/onesignal": "^5.21.6",
    "@ionic-native/printer": "^5.24.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^5.0.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "angularfire2": "^5.1.2",
    "chart.js": "^2.8.0",
    "cordova-android": "^8.0.0",
    "cordova-ios": "4.5.5",
    "cordova-plugin-android-permissions": "^1.0.2",
    "cordova-plugin-camera": "^4.1.0",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-geolocation": "^4.0.2",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.2.1",
    "cordova-plugin-nativeaudio": "^3.0.9",
    "cordova-plugin-printer": "^0.8.0",
    "cordova-plugin-request-location-accuracy": "^2.3.0",
    "cordova-plugin-splashscreen": "^5.0.4",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-whitelist": "^1.3.4",
    "cordova-res": "^0.9.0",
    "cordova.plugins.diagnostic": "^5.0.2",
    "core-js": "^2.5.4",
    "firebase": "7.14.2",
    "moment": "^2.24.0",
    "ng2-charts": "^1.6.0",
    "onesignal-cordova-plugin": "^2.10.1",
    "rxjs": "~6.5.1",
    "sweetalert2": "^9.10.12",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.20",
    "@angular/cli": "~8.3.23",
    "@angular/compiler": "~8.2.14",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@ionic/angular-toolkit": "^2.1.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-camera": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-plugin-android-permissions": {},
      "cordova.plugins.diagnostic": {
        "ANDROID_SUPPORT_VERSION": "28.+"
      },
      "cordova-plugin-geolocation": {},
      "onesignal-cordova-plugin": {},
      "cordova-plugin-request-location-accuracy": {
        "PLAY_SERVICES_LOCATION_VERSION": "16.+"
      },
      "cordova-plugin-printer": {
        "ANDROID_SUPPORT_V4_VERSION": "28.+"
      },
      "cordova-plugin-nativeaudio": {}
    },
    "platforms": [
      "ios",
      "android"
    ]
  }
}