-
Notifications
You must be signed in to change notification settings - Fork 2.2k
NullInjectorError is thrown upon adding the AngularFireAnalyticsModule in Angular 13 #3248
-
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 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.
Beta Was this translation helpful? Give feedback.
All reactions
I found my solution. I did not catch that I need to add the code below to the app.module.ts file. I did not get this step while following the https://github.com/angular/angularfire/blob/master/docs/analytics/getting-started.md documentation.
AngularFireModule.initializeApp(environment.firebase),
Replies: 1 comment
-
I found my solution. I did not catch that I need to add the code below to the app.module.ts file. I did not get this step while following the https://github.com/angular/angularfire/blob/master/docs/analytics/getting-started.md documentation.
AngularFireModule.initializeApp(environment.firebase),
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1