couldnt import fireStoreModule correctly in angular

Question

I am getting this error while running the angular project

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

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

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?

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"
  }
}

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

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

the link https://www.npmjs.com/package/@angular/fire

finally once I did npm update

then deleted package-lock.json

then run command npm i

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

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"
  }
}

just did npm uninstall @angular/fire

then did npm i @angular/fire

then did npm update

deleted package-lock.json

and again did npm i

Answer 1

Remove AngularFirestore from App.module.ts completely from import and from imports array and clean restart using npm run start or ng serve. In app.module.ts file only modules can be imported.

Remove it from app.module.ts

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

Answer 2

Try this:

npm install firebase angularfire2 @types/firebase

Referred: Angular, Firebase and AngularFire Crash Course - Learn Why Firebase might change the way we think about Web Development