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.
First you'll want to inject the AngularFirestore injectable into your component: import { Component } from '@angular/core'; import { AngularFirestore } from 'angularfire2/firestore'; @Component({ ... }) export class AppComponent { constructor( private afs: AngularFirestore ) { // ... } }
AngularFireDatabase is a service which can be injected through the constructor of your Angular component or @Injectable() service. In the previous step, we modified the /src/app/app. component. ts to retrieve data as an object.
AngularFireAuth. user provides you an Observable<User|null> to monitor your application's authentication State. AngularFireAuth promise proxies an initialized firebase. auth. Auth instance, allowing you to log users in, out, etc.
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.
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
];
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With