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

NathanTaylor
July 16, 2022
233 views
0 votes
2 Answers

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.

Answers

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.

This is new, right style in "@angular/fire": "^7.4.1".

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';

// https://github.com/angular/angularfire/blob/master/src/analytics/public_api.ts
import { getAnalytics, provideAnalytics, ScreenTrackingService } from '@angular/fire/analytics';

@NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
        provideFirebaseApp(()=> initializeApp(environment.firebase)),
        provideAnalytics(() => getAnalytics()), // Add this line here!
        // AngularFireModule.initializeApp(environment.firebase), // Old style.
        // AngularFireAnalyticsModule, // Old style.
        BrowserModule
    ],
    bootstrap: [
        AppComponent
    ]
    providers: [
        ScreenTrackingService
    ],
})
export class AppModule { }

Same as Firestore sample in below.
https://github.com/angular/angularfire/blob/master/README.md

ScreenTrackingService also exported in @angular/fire/analytics.
See screen-tracking.service.ts in https://github.com/angular/angularfire/blob/master/src/analytics/public_api.ts

But I can’t find documentation. . .

Please signup or login to give your own answer.

Click here to cancel reply.

Firebase – NullInjectorError is thrown upon adding the AngularFireAnalyticsModule in Angular 13

Answers