无法以角度正确导入 fireStoreModule [英] couldnt import fireStoreModule correctly in angular

问题描述

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

I am getting this error while running the angular project

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

This likely means that the library (@angular/fire/firestore) which declares AngularFirestore has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of theen processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy

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

I just read this line in from here https://github.com/angular/angularfire/releases

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

AngularFirestoreModule no longer imports firebase/firestore on it's own to remain side-effect free, you'll need to import 'firebase/firestore' on your own

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

what does it mean how can I run the project successfully?

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

the below is my package.json and I am using angular version 10 the latest one and the @angular/fire":version is 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 似乎不起作用..!!

Actually I have updated my project recently but in the previous version that is 9 the firestore didnt seem to work..!!

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

below are the bunch of commands I used to update project and use 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

then deleted package-lock.json

然后运行命令 npm i

下面是我的应用模块.ts

the below is my app module.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{

    }

如果我注释此导入，则项目运行良好，但如果我取消注释此导入，则会出现错误.

If I comment this imports the project runs fine but if I uncomment this imports then there is an error.

EDIT-1

现在我的 package.json 看起来像

now my package.json looks like

{
  "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卸载@angular/fire

然后npm i @angular/fire

然后做了npm update

删除了package-lock.json

又一次npm i

推荐答案

试试这个:

npm install firebase angularfire2 @types/firebase

参考:Angular、Firebase 和 AngularFire 速成课程 - 了解 Firebase 为什么可能会改变我们对 Web 开发的看法

这篇关于无法以角度正确导入 fireStoreModule的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！