无法以角度正确导入 fireStore 模块答案

【问题标题】：couldnt import fireStoreModule correctly in angular无法以角度正确导入 fireStore 模块
【发布时间】：2020-11-17 16:57:53
【问题描述】：

我在运行 Angular 项目时遇到此错误

这可能意味着库 (@angular/fire/firestore) 声明 ngcc 未正确处理 AngularFirestore，或与 Angular Ivy 不兼容。检查是否有较新的版本由 ngcc 正确处理，或者与 Angular Ivy 不兼容。检查是否有更新版本的库可用，如果有则更新所以。还可以考虑与图书馆的作者核对，看看是否库应与 Ivy 兼容

我刚刚从这里https://github.com/angular/angularfire/releases读到这一行

AngularFirestoreModule 不再自行导入 firebase/firestore 以保持无副作用，您需要自行导入“firebase/firestore”

这是什么意思我怎样才能成功运行项目？

以下是我的 package.json，我使用的是最新的 Angular 版本 10，@angular/fire":version 是 6.0.2

{
  "name": "angular10-app",
  "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": "~10.0.5",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "~10.0.5",
    "@angular/compiler": "~10.0.5",
    "@angular/core": "~10.0.5",
    "@angular/fire": "^6.0.2",
    "@angular/flex-layout": "^9.0.0-beta.31",
    "@angular/forms": "~10.0.5",
    "@angular/material": "^9.2.4",
    "@angular/platform-browser": "~10.0.5",
    "@angular/platform-browser-dynamic": "~10.0.5",
    "@angular/router": "~10.0.5",
    "@kolkov/angular-editor": "^1.1.2",
    "@ngx-translate/core": "^12.1.2",
    "angular-split": "^3.0.3",
    "angularfire": "^2.3.0",
    "bootstrap": "^4.5.0",
    "firebase": "^7.17.1",
    "ngx-bootstrap": "^5.6.1",
    "ngx-translate-multi-http-loader": "^3.0.0",
    "querybase": "^0.6.0",
    "rxjs": "~6.5.4",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/architect": "^0.1000.4",
    "@angular-devkit/build-angular": "^0.1000.4",
    "@angular/cli": "~10.0.4",
    "@angular/compiler-cli": "~10.0.5",
    "@angular/language-service": "~10.0.5",
    "@types/jasmine": "^3.5.11",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.12.53",
    "codelyzer": "^6.0.0",
    "firebase-tools": "^8.0.0",
    "fuzzy": "^0.1.3",
    "inquirer": "^6.2.2",
    "inquirer-autocomplete-prompt": "^1.0.1",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "open": "^7.1.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.7"
  }
}

实际上我最近更新了我的项目，但在以前的版本 9 中，firestore 似乎没有工作..!!

以下是我用来更新项目和使用 firebase 的一堆命令

1. ng update @angular/cli
2. ng update @angular/core
3. ng add @angular/fire   //By adding this its written that I will get the latest version

链接https://www.npmjs.com/package/@angular/fire

终于有一次我做了npm update

然后删除 package-lock.json

然后运行命令npm i

以下是我的应用模块.ts

   //import { AngularFirestore } from '@angular/fire/firestore';
    import {AngularFireDatabaseModule} from '@angular/fire/database';
    import {AngularFireModule} from '@angular/fire';
    import 'firebase/firestore';
    //import { AngularFirestoreModule} from '@angular/fire/firestore';
    
    imports: [
    AngularFireModule.initializeApp(environment.firebase),
        AngularFireDatabaseModule,
        //AngularFirestore,
        //AngularFirestoreModule,
    ],
    providers: [],
      bootstrap: [AppComponent]
})
    export class AppModule{

    }

如果我评论这个导入，项目运行正常，但如果我取消评论这个导入，则会出现错误。

EDIT-1

现在我的 package.json 看起来像

{
  "name": "angular9-app",
  "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": "~10.0.5",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "~10.0.5",
    "@angular/compiler": "~10.0.5",
    "@angular/core": "~10.0.5",
    "@angular/fire": "^6.0.2",
    "@angular/flex-layout": "^9.0.0-beta.31",
    "@angular/forms": "~10.0.5",
    "@angular/material": "^9.2.4",
    "@angular/platform-browser": "~10.0.5",
    "@angular/platform-browser-dynamic": "~10.0.5",
    "@angular/router": "~10.0.5",
    "@kolkov/angular-editor": "^1.1.2",
    "@ngx-translate/core": "^12.1.2",
    "angular-split": "^3.0.3",
    "bootstrap": "^4.5.0",
    "firebase": "^7.17.1",
    "ngx-bootstrap": "^5.6.1",
    "ngx-translate-multi-http-loader": "^3.0.0",
    "querybase": "^0.6.0",
    "rxjs": "~6.5.4",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/architect": "^0.1000.4",
    "@angular-devkit/build-angular": "^0.1000.4",
    "@angular/cli": "~10.0.4",
    "@angular/compiler-cli": "~10.0.5",
    "@angular/language-service": "~10.0.5",
    "@types/jasmine": "^3.5.11",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.12.53",
    "codelyzer": "^6.0.0",
    "firebase-tools": "^8.0.0",
    "fuzzy": "^0.1.3",
    "inquirer": "^6.2.2",
    "inquirer-autocomplete-prompt": "^1.0.1",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "open": "^7.1.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.7"
  }
}

刚刚npm uninstall @angular/fire

然后npm i @angular/fire

然后npm update

已删除package-lock.json

又是npm i

【问题讨论】：

请显示包 json 并告诉我们您的角度版本。并告诉你用来安装firestoremodule的命令
当然让我更新它
嗨@sagat 我已经更新了问题，如果您需要其他任何东西，请告诉我，谢谢
当然让我检查并回复给你..!!感谢您的建议
嗨@sagat我仍然更新了package.json，现在它看起来像EDIT-1但有同样的错误）：

标签： angular firebase google-cloud-firestore angular8 angular10

【解决方案1】：

试试这个：

npm install firebase angularfire2 @types/firebase

【讨论】：

【解决方案2】：

从 App.module.ts 中完全从导入和导入数组中删除 AngularFirestore，并使用 npm run start 或 ng serve 重新启动。在 app.module.ts 文件中只能导入 modules。

从 app.module.ts 中删除它

从 '@angular/fire/firestore' 导入 { AngularFirestore }；

【讨论】：