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

Question

我正在尝试将 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

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

Answer 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.

Answer 2

这里有一个例子：

从'@angular/fire/app'导入{initializeApp, provideFirebaseApp};

进口：[

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

],

Answer 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
];

Answer 4

使用@angular/fire/compat 而不是@angular/fire 需要在所有像这样的代码处执行此操作（例如：@angular/fire/database --> @angular/fire/compat/数据库）

sample

Answer 5

我也有类似的问题，简单的解决方法如下

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

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

AngularFireModule and AngularFireDatabaseModule not being found in @angular/fire

firebase

typescript

angularfire

angular