AngularFireModule and AngularFireDatabaseModule not being found in @angular/fire

Question

I am trying to implement Firebase Realtime Database into a angular project and Im getting stuck at one of the very first steps. Importing AngularFireModule and AngularFireDatabaseModule. It gives me the following error:

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

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

And here is how I am importing them:

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

Am I missing something here? I have installed @angular/fire via the command

npm i firebase @angular/fire

and have also installed firebase tools. Here is a list of the Angular packages I currently have installed and their versions:

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

I do apologise if this is all excessive information but I am completely stuck as to what the issue is. Any help would be GREATLY appreciated. Right now my suspicion is that its a compatibility issue or perhaps a feature that doesnt exist anymore on the latest versions but I really dont know.

score 46 · Accepted Answer · answered Aug 26 '21 at 13:20

46

AngularFire 7.0.0 was launched yesterday with a new API that has a lot of bundle size reduction benefits.

Instead of top level classes like AngularFireDatabase, you can now import smaller independent functions.

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

The initialization process is a bit different too as it has a more flexible API for specifying configurations.

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

If you want to proceed with the older API there's 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.

answered Aug 26 '21 at 13:20

David East

31,526
6
67
82

1

My god thank you so much. That worked. Was practically flailing my arms trying to figure out why it wasnt working, – Corey Aug 26 '21 at 13:35
2

How do I import connectEmulator and enableIndexedDbPersistence? – Godstime Osarobo Sep 01 '21 at 09:14
Hmm other dependencies started crying with compat. Ended up using `npm i @angular/fire@6.1.5` – Sanjay Verma Sep 02 '21 at 04:39
1

version 7 upgrade docs unfortunately, almost useless( – Constantine Oct 31 '21 at 19:13
the provided link explains how you have to change your imports from `@angular/fire/*` to `@angular/fire/compat/*` and `firebase/*` to `firebase/compat/*`wich worked for me thanks very much sir – besim Nov 03 '21 at 18:33

score 18 · Answer 2 · answered Sep 01 '21 at 19:13

18

Here my code, working as of 1 Sep 2021

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

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

answered Sep 01 '21 at 19:13

Ivan Moroz

269
1
5

How is this solving your problem? – XouDo Sep 01 '21 at 19:26
Please add further details to expand on your answer, such as working code or documentation citations. – Community Sep 01 '21 at 19:26
I think his point is that if you don't want to change your code too much then just add /compat after @angular/fire in the imports. I guess the compat directory allows imports the way they were done in the past. – Asad Sep 13 '21 at 19:04

score 3 · Answer 3 · answered Sep 01 '21 at 13:43

3

here is an example:

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

imports: [

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

],

answered Sep 01 '21 at 13:43

Manuel Castillo

31
1

Please add further details to expand on your answer, such as working code or documentation citations. – Community Sep 01 '21 at 14:52

score 3 · Answer 4 · answered Nov 10 '21 at 13:52

3

Use @angular/fire/compat instead of @angular/fire need to do it in all places that code like this (ex: @angular/fire/database --> @angular/fire/compat/database)

sample

answered Nov 10 '21 at 13:52

Maniraj

33
5

Please avoid using images containing code - instead use code blocks containing relevant code. Click on the curly bracket in the editor or press ctrl + k while the code is highlighted. – Tim Rasim Nov 10 '21 at 14:38

score 1 · Answer 5 · edited Apr 01 '22 at 12:56

I also has similar problem simple solution is below

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

now in app.module.ts import like this

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

AngularFireModule and AngularFireDatabaseModule not being found in @angular/fire

5 Answers5

Linked