NullInjectorError is thrown upon adding the AngularFireAnalyticsModule in Angular 13-CodePudding

I am trying to add firebase analytics using @angular/fire with my Angular 13 project. When adding AngularFireAnalyticsModule to my app.module.ts file, I get the NullInjectorError in my browser console shown below. This results in the website not loading.

NullInjectorError: R3InjectorError(AppModule)[AngularFireAnalyticsModule -> AngularFireAnalytics -> FirebaseApp -> FirebaseApp -> FirebaseApp]: 
  NullInjectorError: No provider for FirebaseApp!

With the following setup, I am able to emulate/deploy my Angular 13 project with no trouble.

app.module.ts settings:

import { BrowserModule } from '@angular/platform-browser';
import { environment } from 'src/environments/environment';

// https://www.npmjs.com/package/@angular/fire
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';

// https://github.com/angular/angularfire/blob/HEAD/docs/analytics/getting-started.md
import { AngularFireAnalyticsModule, ScreenTrackingService } from '@angular/fire/compat/analytics';

@NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
        provideFirebaseApp(()=> initializeApp(environment.firebase)),
//      AngularFireAnalyticsModule,
        BrowserModule
    ],
    bootstrap: [
        AppComponent
    ]
    providers: [
        ScreenTrackingService
    ],
})
export class AppModule { }

firebase variable data found in environment.ts:

export const environment = {
  production: false,
    firebase: {
        apiKey: '<my-key>',
        authDomain: '<my-project-authdomain>',
        projectId: '<my-project-id>',
        storageBucket: '<my-storage-bucket>',
        messagingSenderId: '<my-messaging-sender-id>',
        appId: '<my-app-id>',
        measurementId: '<my-measurement-id>'
    }
};

my package.json

{
  "name": "my-app",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "preview": "firebase emulators:start",
    "deploy": "firebase deploy --only hosting",
    "ngCacheOff": "ng config cli.cache.enabled false",
    "ngCacheOn": "ng config cli.cache.enabled true",
    "ngCacheClear": "rmdir /s /q .angular\\cache"
  },
  "dependencies": {
    "@angular/animations": "~13.3.0",
    "@angular/cdk": "^13.3.7",
    "@angular/common": "~13.3.0",
    "@angular/compiler": "~13.3.0",
    "@angular/core": "~13.3.0",
    "@angular/fire": "^7.4.1",
    "@angular/flex-layout": "^13.0.0-beta.38",
    "@angular/forms": "~13.3.0",
    "@angular/material": "^13.3.7",
    "@angular/platform-browser": "~13.3.0",
    "@angular/platform-browser-dynamic": "~13.3.0",
    "@angular/router": "~13.3.0",
    "firebase": "^9.9.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.3.5",
    "@angular/cli": "~13.3.5",
    "@angular/compiler-cli": "~13.3.0",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~4.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.6.2"
  }
}

If I was to uncomment AngularFireAnalyticsModule in the app.module.ts file, the website will brake, and the NullInjectorError will be shown.

I have not added any other analytics code to other components in the project. This is the only change.

I am following the setup documentation given below and my understanding is that the only required code for setting up analytics is to add this module so I do not know what I could be doing to cause this error. Would anyone know what could be causing this error and how to fix it?

https://github.com/angular/angularfire/blob/HEAD/docs/install-and-setup.md

https://github.com/angular/angularfire/blob/master/docs/analytics/getting-started.md

Thank you ahead of time for your help.

CodePudding user response：

I think you are missing the following line in your app.module.ts file (in the imports area):

import { BrowserModule } from '@angular/platform-browser';
import { environment } from 'src/environments/environment';

// https://www.npmjs.com/package/@angular/fire
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';

// https://github.com/angular/angularfire/blob/HEAD/docs/analytics/getting-started.md
import { AngularFireAnalyticsModule, ScreenTrackingService } from '@angular/fire/compat/analytics';

@NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
        // provideFirebaseApp(()=> initializeApp(environment.firebase)), I think this line can be completely commented out!
        AngularFireModule.initializeApp(environment.firebase), // Add this line here!
        AngularFireAnalyticsModule,
        BrowserModule
    ],
    bootstrap: [
        AppComponent
    ]
    providers: [
        ScreenTrackingService
    ],
})
export class AppModule { }

I also faced a similar issue before and if I remember correctly, this was the solution. I think the documentation needs to emphasize on this line because it often gets neglected.