Angular从v14升级到v15后出现Firebase初始化错误

算力阿峰

2026-6-27

Angular v14升级v15后Firebase初始化错误排查

将Angular项目从v14版本升级到v15版本后，出现Firebase相关错误：

Error: Uncaught (in promise): FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app-compat/no-app)

以下是项目相关配置及代码：

package.json配置

{
  "name": "learn",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --host=0.0.0.0 --port=8100 --hmr -o",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint --fix",
    "e2e": "ng e2e",
    "dev": "concurrently --kill-others \"npm run start\" \"npx tailwindcss -i ./src/styles.css -o ./src/theme/output.css --watch\"",
    "scully": "npx scully --",
    "scully:serve": "npx scully serve --",
    "dev:ssr": "ng run app:serve-ssr",
    "serve:ssr": "node dist/app/server/main.js",
    "build:ssr": "ng build && ng run app:server",
    "prerender": "ng run app:prerender"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^3.0.0-beta.0",
    "@angular/cdk": "14.0.4",
    "@angular/common": "^15.2.10",
    "@angular/core": "^15.2.10",
    "@angular/fire": "^7.6.0",
    "@angular/forms": "^15.2.10",
    "@angular/platform-browser": "^15.2.10",
    "@angular/platform-browser-dynamic": "^15.2.10",
    "@angular/platform-server": "^15.2.10",
    "@angular/router": "^15.2.10",
    "@fortawesome/fontawesome-free": "^6.2.0",
    "@ionic/angular": "^6.1.9",
    "@ng-select/ng-select": "^6.1.0",
    "@ngrx/effects": "^14.0.2",
    "@ngrx/router-store": "^14.0.2",
    "@ngrx/schematics": "^14.0.2",
    "@ngrx/store": "^14.0.2",
    "@ngrx/store-devtools": "^14.0.2",
    "@nguniversal/express-engine": "^15.2.1",
    "@scullyio/init": "^2.1.41",
    "@scullyio/ng-lib": "^2.1.0",
    "@scullyio/scully": "^2.1.0",
    "@scullyio/scully-plugin-puppeteer": "^2.1.0",
    "@sentry/angular": "^7.31.1",
    "@sentry/tracing": "^7.31.1",
    "@smartbear/browser-info": "^1.5.0",
    "@supy-io/ngx-intercom": "^14.2.12",
    "@trademe/ng-add-to-calendar": "^3.2.0",
    "@types/googlemaps": "3.39.12",
    "chart.js": "^3.9.1",
    "date-fns": "^2.29.1",
    "express": "^4.15.2",
    "firebase": "^9.23.0",
    "ng2-charts": "^4.0.0",
    "ngx-cookie-service": "^14.0.1",
    "ngx-youtube-player": "^12.0.2",
    "rxjs": "~6.6.0",
    "tinymce": "^6.1.2",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.11",
    "@angular-eslint/builder": "~13.0.1",
    "@angular-eslint/eslint-plugin": "~13.0.1",
    "@angular-eslint/eslint-plugin-template": "~13.0.1",
    "@angular-eslint/template-parser": "~13.0.1",
    "@angular/cli": "^15.2.11",
    "@angular/compiler": "^15.2.10",
    "@angular/compiler-cli": "^15.2.10",
    "@angular/language-service": "^15.2.10",
    "@ionic/angular-toolkit": "^6.0.0",
    "@ngrx/eslint-plugin": "^14.0.2",
    "@nguniversal/builders": "^15.2.1",
    "@types/express": "^4.17.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "autoprefixer": "^10.4.7",
    "concurrently": "^7.2.2",
    "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": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "postcss": "^8.4.14",
    "protractor": "~7.0.0",
    "tailwindcss": "^3.1.6",
    "ts-node": "~8.3.0",
    "typescript": "~4.9.5"
  },
  "description": "An Ionic project"
}

app.module.ts代码

import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { FIREBASE_OPTIONS } from '@angular/fire/compat';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { EffectsModule } from '@ngrx/effects';
import { StoreRouterConnectingModule } from '@ngrx/router-store';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { NgAddToCalendarModule } from '@trademe/ng-add-to-calendar';
import {
    RolesComponentModule,
    SelectComponentModule,
    UploadComponentModule,
} from 'src/app/components/index';
import {
    ImageChangeDirectiveMenuModule,
    ImagePreloadDirectiveModule,
    TooltipDirectiveModule,
} from 'src/app/directives/index';

import { APP_INITIALIZER, ErrorHandler } from '@angular/core';
import { Router } from '@angular/router';
import { ScullyLibModule } from '@scullyio/ng-lib';
import * as Sentry from '@sentry/angular';
import { NgxYoutubePlayerModule } from 'ngx-youtube-player';
import { environment } from 'src/environments/environment';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SocialMediaComponentModule } from './components/social-media/social-media.component.module';
import { SelectionDirectiveModule } from './directives';
import { InterceptorService } from './pages/app/interceptor/interceptor.service';
import { metaReducers, reducers } from './reducers';
import {
    AddToCalendarModule,
    AddToCalendarService,
    AuthService,
    NgrxService,
    RudderStack,
} from './services/';
import { ProfileService } from './pages/app/profile/services/profile.service';
import { AngularFireAuthGuardModule } from './auth-guard/auth-guard.module';

@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        IonicModule.forRoot(),
        AppRoutingModule,
        HttpClientModule,
        provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
        provideFirestore(() => getFirestore()),
        StoreModule.forRoot(reducers, { metaReducers }),
        StoreRouterConnectingModule.forRoot(),
        EffectsModule.forRoot([]),
        !environment.production
            ? StoreDevtoolsModule.instrument({
                    maxAge: 25,
                    logOnly: environment.production,
              })
            : [],
        ImagePreloadDirectiveModule,
        TooltipDirectiveModule,
        SelectComponentModule,
        RolesComponentModule,
        UploadComponentModule,
        SocialMediaComponentModule,
        SelectionDirectiveModule,
        ImageChangeDirectiveMenuModule,
        NgAddToCalendarModule,
        AddToCalendarModule,
        ScullyLibModule,
        NgxYoutubePlayerModule.forRoot(),
        AngularFireAuthGuardModule,
    ],
    providers: [
        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
        { provide: FIREBASE_OPTIONS, useValue: environment.firebaseConfig },
        { provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true },
        NgrxService,
        AddToCalendarService,
        RudderStack,
        ProfileService,
        AuthService,
        {
            provide: ErrorHandler,
            useValue: Sentry.createErrorHandler({
                showDialog: false,
            }),
        },
        {
            provide: Sentry.TraceService,
            deps: [Router],
        },
        {
            provide: APP_INITIALIZER,
            useFactory: () => () => {},
            deps: [Sentry.TraceService],
            multi: true,
        },
    ],
    bootstrap: [AppComponent],
})
export class AppModule {}

Angular环境信息

问题解决步骤

统一Firebase初始化方式
你的代码同时使用了AngularFire的新模块化API（provideFirebaseApp）和兼容层的FIREBASE_OPTIONS配置，二者冲突导致初始化失败。
- 如果使用新模块化API（推荐）：直接移除providers数组中的{ provide: FIREBASE_OPTIONS, useValue: environment.firebaseConfig }这一行，provideFirebaseApp已经完成了App初始化。
- 如果仍需使用兼容层服务：保留FIREBASE_OPTIONS，但要确保没有重复初始化逻辑。
清理缓存并重建项目
执行以下命令清理依赖缓存和构建文件，避免旧文件干扰：
```
npm clean-install
ng build --delete-output-path
```
确保服务注入时机正确
如果项目中有提前调用Firebase API的服务，通过APP_INITIALIZER确保Firebase初始化完成后再启动应用：
在providers中添加：
```
{
  provide: APP_INITIALIZER,
  useFactory: (app: FirebaseApp) => () => Promise.resolve(),
  deps: [FirebaseApp],
  multi: true
},
```
记得导入FirebaseApp：
```
import { FirebaseApp } from '@angular/fire/app';
```

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

Angular从v14升级到v15后出现Firebase初始化错误

package.json配置 #

app.module.ts代码 #

Angular环境信息 #

问题解决步骤 #

package.json配置

app.module.ts代码

Angular环境信息

问题解决步骤