最新版本的 @angular/fire 出现错误：Firebase：未创建 Firebase 应用“[DEFAULT]”-请调用 Firebase App.initializeApp()。

Question

我最近升级到了最新版本的@angular/fire，一切都运行良好。但是现在我已经迁移离开了兼容库，现在我遇到了这个问题。在下面的代码中，我遇到了以下错误： Firebase：未创建Firebase应用程序“[DEFAULT]”-请调用Firebase App.initializeApp()。

// ...
import {getAuth, provideAuth} from '@angular/fire/auth';
import {getFirestore, provideFirestore} from '@angular/fire/firestore';
import {initializeApp, provideFirebaseApp} from '@angular/fire/app';
// ...

@NgModule({
  // ...
  providers: [
    // ...
    provideFirebaseApp(() => initializeApp(window['firebase_config'])),
    provideFirestore(() => getFirestore()),
    provideAuth(() => getAuth()),
    // ...
  ],
  // ...
})
export class ApModule {
  // ...
}

以下是堆栈跟踪信息：

Error: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
    at new ZoneAwareError (http://localhost:4200/vendor.js:65953:33)
    at new FirebaseError (http://localhost:4200/apps_frontend_src_app_app_module_ts.js:166709:5)
    at ErrorFactory.create (http://localhost:4200/apps_frontend_src_app_app_module_ts.js:166739:19)
    at getApp (http://localhost:4200/apps_frontend_src_app_app_module_ts.js:122971:25)
    at getAuth (http://localhost:4200/apps_frontend_src_app_app_module_ts.js:137360:77)
    at http://localhost:4200/apps_frontend_src_app_app_module_ts.js:69140:44
    at http://localhost:4200/apps_frontend_src_app_app_module_ts.js:69066:57
    at ZoneDelegate.invoke (http://localhost:4200/polyfills.js:463:26)
    at Zone.run (http://localhost:4200/polyfills.js:225:43)
    at NgZone.runOutsideAngular (http://localhost:4200/vendor.js:34688:28)
    at runOutsideAngular (http://localhost:4200/apps_frontend_src_app_app_module_ts.js:69066:33)
    at http://localhost:4200/apps_frontend_src_app_app_module_ts.js:69140:17
    at http://localhost:4200/apps_frontend_src_app_app_module_ts.js:1581:144
    at http://localhost:4200/apps_frontend_src_app_app_module_ts.js:68430:47
    at ZoneDelegate.invoke (http://localhost:4200/polyfills.js:463:26)

我完全不明白为什么会出现这个错误。非常感谢您的帮助！

- Bart van den Burg

Answer 1

显然问题是 firebase 和 @firebase/app 版本不匹配。 由于这种不匹配，firebase实际上加载到内存两次，但只实例化一次。

- Bart van den Burg

---

你介意详细说明版本不匹配的问题吗？是指 package.json 中 'firebase' 和 '@firebase/app' 的版本吗？我也遇到了同样的问题。 - Obi

如果你运行 npm ls @firebase/app，你可能会看到一个版本的 Firebase 来自 AngularFire，另一个 Firebase 版本可能被加载，这可能会引起冲突。这取决于你安装 FirebaseTools、Firebase 和 AngularFire 的顺序以及你安装的 Firebase 版本。 - Robgit28

我遇到了这个问题，因为我先手动安装了Firebase，然后再安装了AngularFire。为了解决这个问题，我先卸载了两者，然后只安装了AngularFire，它会自动安装自己所依赖的Firebase。 - undefined

Answer 2

是的，请执行ng-update命令 - 更新所有列出的软件包。

- Maye Edwin

Answer 3

文档建议您将提供程序中的代码放在导入中。

import { provideFirebaseApp, getApp, initializeApp } from '@angular/fire/app';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';

@NgModule({
  imports: [
    provideFirebaseApp(() => initializeApp({ ... })),
    provideFirestore(() => getFirestore()),
  ],
  ...
})
export class AppModule { }

- sDe

Answer 4

嗯...好的，我在我的项目中使用升级自8版本的9版本，你要么注释掉了一些东西，要么确实缺少一些东西。让我分享一下我的模块：

const providers = [
 // ...
  AngularFireModule,
  AngularFireAnalyticsModule,
  AngularFireAuthGuard,
  ScreenTrackingService,
  UserTrackingService,
  AngularFireAnalytics,
  {
    provide: ANALYTICS_CONFIG,
    useValue: {
      APP_NAME: appConfig.appName,
      APP_VERSION: appConfig.appVersion
    }
  }
];



@NgModule({
  imports: [
    // ...

    /** Firebase Modules */
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireAnalyticsModule,
    AngularFireAuthGuardModule,
    AngularFireDatabaseModule,
    AngularFireFunctionsModule,

    // ...
  ],
  providers,
  bootstrap: [RootComponent]
})

因此，我的初始化应用程序位于我的导入中而不是我的提供程序中，我记得我以前遇到过一些问题，经过一番挖掘和更改，我想出了上述方法，它对我起作用。正如您所看到的，我使用了他们的许多服务。

从您发布的错误来看，我想问题是由于您的initializeApp未进行初始化，因此请尝试将其移动到导入位置，并确保配置文件具有所有必需的属性。

==更新==

请注意，我粘贴了我的项目导入，您可以忽略除AngularFireModule 导入和提供程序之外的其他所有内容，因为您可能不使用其他内容，我只是为了参考而添加了它们，因为它们可能对其他人有用。

- Estevao Santiago

---

你在这里使用的是旧的“compat”导入。如果你切换到新的模块化API，你将不再使用所有这些AngularFire*Module类。 - Bart van den Burg

您的导入应该像这样：import { initializeApp, provideFirebaseApp, getApp } from '@angular/fire/app'; import { provideAuth, getAuth, connectAuthEmulator } from '@angular/fire/auth'; { provideFirestore, getFirestore, connectFirestoreEmulator } from '@angular/fire/firestore'; { provideFunctions, getFunctions, connectFunctionsEmulator } from '@angular/fire/functions'; { provideStorage, getStorage, connectStorageEmulator } from '@angular/fire/storage'; - Robgit28