无法以角度正确导入fireStoreModule [英] couldnt import fireStoreModule correctly in angular
问题描述
运行角度项目时出现此错误
I am getting this error while running the angular project
这可能意味着该库(@ angular/fire/firestore)声明ngcc未正确处理AngularFirestore，或者与Angular Ivy不兼容.检查是否有新版本的由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更新
然后删除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更新
删除了 package-lock.json
，然后再次 npm i
推荐答案
尝试一下:
npm install firebase angularfire2 @types/firebase
已推荐: Angular，Firebase和AngularFire崩溃课程-了解为什么Firebase可能会改变我们对Web开发的思考方式
这篇关于无法以角度正确导入fireStoreModule的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
