Angular 13添加AngularFireAnalyticsModule触发NullInjectorError求助

在Angular 13项目中使用@angular/fire集成Firebase Analytics，取消注释app.module.ts中的AngularFireAnalyticsModule后，浏览器抛出如下错误，导致网站无法加载：

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

注释该模块时，项目可正常模拟/部署，当前正常配置如下：

当前正常配置 #

app.module.ts #

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

import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
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 { }

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

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

解决方案 #

问题根源是混用了@angular/fire的新API（provideFirebaseApp）和兼容层API（AngularFireAnalyticsModule）。兼容层模块依赖传统的AngularFireModule初始化方式，而非新的provideFirebaseApp提供者。

修改app.module.ts，替换初始化方式并添加AngularFireModule：

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

// 引入兼容层的AngularFireModule
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAnalyticsModule, ScreenTrackingService } from '@angular/fire/compat/analytics';

@NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
        // 使用兼容层的初始化方式
        AngularFireModule.initializeApp(environment.firebase),
        AngularFireAnalyticsModule, // 取消注释
        BrowserModule
    ],
    bootstrap: [
        AppComponent
    ],
    providers: [
        ScreenTrackingService
    ],
})
export class AppModule { }

关键说明 #

• @angular/fire 7.x同时支持两种初始化方式：新的基于提供者的API（适配Angular 14+独立组件）和传统兼容层API（适配Angular 13及更早版本）。
• AngularFireAnalyticsModule属于兼容层，必须配合AngularFireModule.initializeApp()使用，不能和provideFirebaseApp混用。
• 移除原有的provideFirebaseApp导入和配置，改用兼容层初始化方式即可解决依赖注入问题。

内容的提问来源于stack exchange，提问作者Nathan Taylor