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

Question

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

27

我正在尝试将Firebase实时数据库集成到一个Angular项目中，但在其中一个最初的步骤中卡住了。导入AngularFireModule和AngularFireDatabaseModule。它给出以下错误：

我正尝试将Firebase实时数据库集成到angular项目中，并且在最初的步骤中遇到了困难，导入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

如果这些内容过多，我深表歉意，但是我完全不知道问题所在。非常感谢任何帮助。目前我的怀疑是它是一个兼容性问题或者最新版本上不存在的功能，但我真的不知道。

- Corey

5个回答

18

这是我的代码，截至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
];

- Ivan Moroz

这个解决方案对你的问题有帮助吗？ - XouDo

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

我认为他的观点是，如果你不想太多改变你的代码，那么只需在导入中在 @angular/fire 后添加 /compat。我猜 compat 目录允许以过去的方式进行导入。 - Asad

3

使用 @angular/fire/compat 代替 @angular/fire，需要在所有地方都这样做（例如：@angular/fire/database --> @angular/fire/compat/database）

示例

- Maniraj

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

3

这里是一个例子:

import { initializeApp, provideFirebaseApp } from '@angular/fire/app';

引入: [

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

],

- Manuel Castillo

请在您的回答中添加更多细节，例如工作代码或文档引用，以扩展说明。 - Community

1

我也遇到了类似的问题，以下是简单的解决方案。

use latest version of node,angular/cli.
Install latest firebase with npm i firebase.
Install @angular/fire with npm i @angular/fire.

现在在app.module.ts中，导入应该像这样：

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';

- smit agravat

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David East · Accepted Answer

AngularFire 7.0.0昨天发布了新的API，这个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，则有兼容性层可供使用。

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

查看版本 7 升级文档以获取更多信息。