在 @angular/fire 中找不到 AngularFireModule 和 AngularFireDatabaseModule

Posted 2023-02-22

【中文标题】在 @angular/fire 中找不到 AngularFireModule 和 AngularFireDatabaseModule

【英文标题】：AngularFireModule and AngularFireDatabaseModule not being found in @angular/fire

【发布时间】：2021-10-26 13:02:59

【问题描述】：

我正在尝试将 Firebase 实时数据库实施到一个有角度的项目中，但我陷入了最初的步骤之一。导入 AngularFireModule 和 AngularFireDatabaseModule。它给了我以下错误：

Module '"@angular/fire"' has no exported member 'AngularFireModule'.ts(2305)

Module '"@angular/fire/database"' has no exported member 'AngularFireDatabaseModule'.

这是我导入它们的方式：

import AngularFireModule  from '@angular/fire';
import AngularFireDatabaseModule from '@angular/fire/database'

我在这里遗漏了什么吗？我已经通过命令安装了@angular/fire

npm i firebase @angular/fire

并且还安装了 firebase 工具。以下是我目前已安装的 Angular 软件包及其版本列表：

Angular CLI: 12.2.2
Node: 14.17.4
Package Manager: npm 6.14.14
OS: win32 x64

Angular: 12.2.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.2
@angular-devkit/build-angular   12.2.2
@angular-devkit/core            12.2.2
@angular-devkit/schematics      12.2.2
@angular/cli                    12.2.2
@angular/fire                   7.0.0
@schematics/angular             12.2.2
rxjs                            6.6.7
typescript                      4.3.5

如果这些信息过多，我深表歉意，但我完全不知道问题出在哪里。任何帮助将不胜感激。现在我怀疑这是一个兼容性问题，或者可能是最新版本中不再存在的功能，但我真的不知道。

【参考方案1】：

AngularFire 7.0.0 昨天发布了一个新的 API，它具有很多减少包大小的好处。

您现在可以导入较小的独立函数，而不是像 AngularFireDatabase 这样的***类。

import  list  from '@angular/fire/database';

初始化过程也有点不同，因为它有一个更灵活的 API 来指定配置。

@NgModule(
    imports: [
        provideFirebaseApp(() => initializeApp(config)),
        provideFirestore(() => 
            const firestore = getFirestore();
            connectEmulator(firestore, 'localhost', 8080);
            enableIndexedDbPersistence(firestore);
            return firestore;
        ),
        provideStorage(() => getStorage()),
    ],
)

如果您想继续使用旧版 API，请使用 a compatibility layer。

import  AngularFireModule from '@angular/fire/compat'
import  AngularFireDatabaseModule  from '@angular/fire/compat/database';

See the version 7 upgrade docs for more information.

【讨论】：

天哪，非常感谢。那行得通。几乎是在挥动我的手臂，试图弄清楚为什么它不起作用，

如何导入 connectEmulator 和 enableIndexedDbPersistence？

嗯，其他依赖项开始与 compat 一起哭泣。最终使用npm i @angular/fire@6.1.5

第 7 版升级文档很遗憾，几乎没用（

提供的链接说明了如何将导入从 @angular/fire/* 更改为 @angular/fire/compat/* 和 firebase/* 更改为 firebase/compat/*wich 非常感谢先生

【参考方案2】：

这是一个例子：

从 '@angular/fire/app' 导入 initializeApp, provideFirebaseApp ；

进口：[

    provideFirebaseApp(() => initializeApp(environment.firebase))

],

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。

【参考方案3】：

这是我的代码，截至 2021 年 9 月 1 日有效

import  AngularFireAuthModule  from "@angular/fire/compat/auth";
import  AngularFireModule  from '@angular/fire/compat';

const firebaseConfig = [
  AngularFireAuthModule,
  AngularFireModule.initializeApp(environment.firebase) // Your config
];

【讨论】：

这如何解决您的问题？

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。

我认为他的观点是，如果您不想过多地更改代码，那么只需在导入中的 @angular/fire 之后添加 /compat 即可。我猜 compat 目录允许像过去那样导入。

【参考方案4】：

使用@angular/fire/compat 而不是@angular/fire 需要在所有类似这样的代码的地方执行它（例如：@angular/fire/database --> @angular/fire/compat/database）

sample

【讨论】：

请避免使用包含代码的图片 - 而是使用包含相关代码的代码块。单击编辑器中的大括号或在代码突出显示时按 ctrl + k。