I\'m learning Angular looking for help in fixing the error: I\'m following this link : https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md to creat
Change Your Import From :
import { AngularFirestore } from '@angular/fire/firestore/firestore';
To This :
import { AngularFirestore } from '@angular/fire/firestore';
This solve my problem.
Adding AngularFirestoreModule.enablePersistence()
in import section resolved my issue:
imports: [
BrowserModule, AngularFireModule,
AngularFireModule.initializeApp(config),
AngularFirestoreModule.enablePersistence()
]
You should add providers: [AngularFirestore]
in app.module.ts
.
@NgModule({
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebase)
],
declarations: [ AppComponent ],
providers: [AngularFirestore],
bootstrap: [ AppComponent ]
})
export class AppModule {}
I had the same issue while adding firebase to my Ionic App. To fix the issue I followed these steps:
npm install @angular/fire firebase --save
In my app/app.module.ts:
...
import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
import { AngularFirestoreModule, SETTINGS } from '@angular/fire/firestore';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFirestoreModule
],
providers: [
{ provide: SETTINGS, useValue: {} }
],
bootstrap: [AppComponent]
})
Previously we used FirestoreSettingsToken instead of SETTINGS. But that bug got resolved, now we use SETTINGS. (link)
In my app/services/myService.ts I imported as:
import { AngularFirestore } from "@angular/fire/firestore";
For some reason vscode was importing it as "@angular/fire/firestore/firestore";I After changing it for "@angular/fire/firestore"; the issue got resolved!
Weird thing for me was that I had the provider:[], but the HTML tag that uses the provider was what was causing the error. I'm referring to the red box below:
It turns out I had two classes in different components with the same "employee-list.component.ts" filename and so the project compiled fine, but the references were all messed up.