afs.collection is not a function

Issue

Firebase 8 seems to have a problem. Firestore was not able to get a collection or doc element in case of error '''this.afs.collection is not a function'''. I understand, afs seems to be something like not initialized. But its set as provider in 'app.module.ts' and its not null.

Then I installed all I found, like angular/fire 6.1.5, firebase 8, ionic-native/firebase 5.36, firestore-x, firebase-authentication, cordova-plugin-firebase 2.0.5, cordova-plugin-firebase-authentication, cordova-plugin-firebasex. It feels overloaded but I still can not get the function, even if afs instance is not null.

Any ideas?

    "dependencies": {
    "@angular-devkit/architect": "^0.1200.0",
    "@angular-devkit/build-angular": "^12.2.3",
    "@angular/common": "^12.2.3",
    "@angular/core": "^12.2.3",
    "@angular/fire": "^6.1.5",
    "@angular/forms": "~12.1.1",
    "@angular/platform-browser": "~12.1.1",
    "@angular/platform-browser-dynamic": "~12.1.1",
    "@angular/router": "~12.1.1",
    "@capacitor/android": "3.1.1",
    "@capacitor/app": "1.0.2",
    "@capacitor/core": "3.1.1",
    "@capacitor/haptics": "1.0.2",
    "@capacitor/keyboard": "1.0.2",
    "@capacitor/status-bar": "1.0.2",
    "@ionic-native/android-permissions": "^5.36.0",
    "@ionic-native/app-version": "^5.36.0",
    "@ionic-native/calendar": "^5.36.0",
    "@ionic-native/camera": "^5.36.0",
    "@ionic-native/core": "^5.36.0",
    "@ionic-native/device": "^5.36.0",
    "@ionic-native/diagnostic": "^5.36.0",
    "@ionic-native/firebase": "^5.36.0",
    "@ionic-native/firebase-authentication": "^5.36.0",
    "@ionic-native/firebase-x": "^5.36.0",
    "@ionic-native/http": "^5.36.0",
    "@ionic-native/in-app-browser": "^5.36.0",
    "@ionic-native/is-debug": "^5.36.0",
    "@ionic-native/keyboard": "^5.36.0",
    "@ionic-native/network": "^5.36.0",
    "@ionic-native/open-native-settings": "^5.36.0",
    "@ionic-native/qr-scanner": "^5.36.0",
    "@ionic-native/screenshot": "^5.36.0",
    "@ionic-native/social-sharing": "^5.36.0",
    "@ionic-native/splash-screen": "^5.36.0",
    "@ionic-native/status-bar": "^5.36.0",
    "@ionic/angular": "^5.6.14",
    "@ionic/storage": "^3.0.6",
    "@ionic/storage-angular": "^3.0.6",
    "ajv": "^6.9.1",
    "chart.js": "^3.5.1",
    "com.darktalker.cordova.screenshot": "^0.1.6",
    "cordova-open-native-settings": "^1.5.5",
    "cordova-plugin-firebase": "^2.0.5",
    "cordova-plugin-inappbrowser": "^5.0.0",
    "cordova-plugin-is-debug": "^1.0.0",
    "cordova-plugin-qrscanner": "^3.0.1",
    "cordova-plugin-x-socialsharing": "^6.0.3",
    "cordova.plugins.diagnostic": "^3.9.2",
    "firebase": "^8.10.0",
    "guid-typescript": "^1.0.9",
    "i": "^0.3.6",
    "ionic2-calendar": "^0.6.9",
    "npm": "^7.21.1",
    "rxjs": "~6.5.3",
    "swiper": "^6.8.4",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-eslint/builder": "~12.3.0",
    "@angular-eslint/eslint-plugin": "~12.3.0",
    "@angular-eslint/eslint-plugin-template": "~12.3.0",
    "@angular-eslint/template-parser": "~12.3.0",
    "@angular/cli": "~12.1.1",
    "@angular/compiler": "~12.1.1",
    "@angular/compiler-cli": "~12.1.1",
    "@angular/language-service": "~12.1.1",
    "@capacitor/cli": "^3.2.0",
    "@ionic/angular-toolkit": "^4.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.20.21",
    "@typescript-eslint/eslint-plugin": "4.16.1",
    "@typescript-eslint/parser": "4.16.1",
    "cordova": "^10.0.0",
    "cordova-android": "^9.1.0",
    "cordova-android-support-gradle-release": "^3.0.1",
    "cordova-browser": "^6.0.0",
    "cordova-plugin-advanced-http": "^3.1.1",
    "cordova-plugin-android-permissions": "^1.1.2",
    "cordova-plugin-androidx": "^3.0.0",
    "cordova-plugin-androidx-adapter": "^1.1.3",
    "cordova-plugin-app-version": "^0.1.12",
    "cordova-plugin-calendar": "^5.1.5",
    "cordova-plugin-camera": "^5.0.3",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-firebase-authentication": "^5.0.0",
    "cordova-plugin-firebasex": "^13.0.1",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.0.0",
    "cordova-plugin-network-information": "^3.0.0",
    "cordova-plugin-splashscreen": "^5.0.4",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.5",
    "cordova-sqlite-storage": "^6.0.0",
    "cordova-support-android-plugin": "~1.0.0",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~7.0.0",
    "jetifier": "^2.0.0",
    "karma": "~6.3.4",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~4.0.1",
    "karma-jasmine-html-reporter": "^1.7.0",
    "protractor": "~7.0.0",
    "ts-node": "~10.1.0",
    "typescript": "~4.3.5"
  },
  "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-sqlite-storage": {},
      "cordova-plugin-calendar": {
        "CALENDAR_USAGE_DESCRIPTION": " ",
        "CONTACTS_USAGE_DESCRIPTION": " "
      },
      "cordova-plugin-advanced-http": {
        "ANDROIDBLACKLISTSECURESOCKETPROTOCOLS": "SSLv3,TLSv1"
      },
      "cordova-plugin-android-permissions": {},
      "cordova-plugin-network-information": {},
      "cordova-plugin-camera": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-android-support-gradle-release": {
        "ANDROID_SUPPORT_VERSION": "27.+"
      },
      "cordova-plugin-firebasex": {},
      "cordova-plugin-firebase-authentication": {
        "ANDROID_FIREBASE_AUTH_VERSION": "21.0.+"
      },
      "cordova-plugin-androidx": {},
      "cordova-plugin-androidx-adapter": {},
      "cordova-plugin-app-version": {},
      "cordova-plugin-is-debug": {}
    },
    "platforms": [
      "android"
    ]
  }

Version

     PS C:\Development\App> ionic info
[WARN] Error loading @angular-devkit/schematics package.json: Error: Cannot find module
       '@angular-devkit/schematics/package'

       Require stack:
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
       - C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic

Ionic:

   Ionic CLI                     : 6.17.0 (C:\Users\user\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.6.14
   @angular-devkit/build-angular : 12.2.3
   @angular-devkit/schematics    : not installed
   @angular/cli                  : 12.1.4
   @ionic/angular-toolkit        : 4.0.0

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : android 9.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 19 other plugins)

Utility:

   cordova-res : not installed globally
   native-run  : 1.4.0

System:

   Android SDK Tools : 26.1.1 (C:\Users\user\AppData\Local\Android\Sdk)
   NodeJS            : v14.17.4 (C:\Program Files\nodejs\node.exe)
   npm               : 7.21.1
   OS                : Windows 10

app.module.ts

    firebase.initializeApp(environment.firebase);

@NgModule({
  declarations: [
    AppComponent
  ],
  entryComponents: [],
  imports: [
    BrowserModule,
    NgCalendarModule,
    AppRoutingModule,
    IonicModule.forRoot(),
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule.enablePersistence(),
    AngularFireAuthModule,
    IonicStorageModule.forRoot(),
    HttpClientModule
    
  ],

  providers: [
    StatusBar,
    SplashScreen,
    ErrorHandler,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: AngularFirestore, useValue: {} },
    QRScanner,
    DebugService,
    TbSoftwareService,
    AppSettingController,
    LiveTickerController,
    SportEventController,
    StorageController,
    UserProfileController,
    StatisticController,
    AuthenticateService,
    OpenNativeSettings,
    AppVersion,
    Screenshot,
    SocialSharing,
    Calendar,
    Device,
    InAppBrowser,
    HTTP,
    HttpClient,
    PushNotificationService,
    FirebaseX,
    Firebase,
    Camera,
    IsDebug,
    DataProvider
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Solution

modification needed to avoid mixing libraries. Mainly explained in app.module:

• removed after Import firebase.initializeApp(environment.firebase);
• added in imports: AngularFireModule.initializeApp(environment.firebase),
• removed: AngularFireAuthModule
• removed in providers: { provide: AngularFirestore, useValue: {} },
• instead added in providers: { provide: SETTINGS, useValue: {} },
• removed in providers: Firebase,

Answered By - Nasenbaer