Encountered the same issue myself. The problem stemmed from a typo in one of my file imports - I mistakenly used angularFire2/... instead of angularfire2/..., resulting in the error.
Here's an example showcasing a basic setup for Angular Firestore integration.
Install angularfire2 and firebase
npm install firebase angularfire2 --save
environments/environment.ts
export const environment = {
production: false,
firebase: { // add your API details here
apiKey: '<your-key>',
authDomain: '<your-project-authdomain>',
databaseURL: '<your-database-URL>',
projectId: '<your-project-id>',
storageBucket: '<your-storage-bucket>',
messagingSenderId: '<your-messaging-sender-id>'
}
}
app.module.ts
Imports along with other necessary imports
// Firebase Modules
import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { AngularFireAuthModule } from 'angularfire2/auth';
// Auth Service
import { AuthService } from './services/auth.service';
// Environment with Firebase API key
import { environment } from './../environments/environment';
Module Imports & Providers Arrays
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFirestoreModule.enablePersistence(),
AngularFireAuthModule,
RouterModule.forRoot(appRoutes)
]
providers: [
AuthService,
]
Your Firestore Auth Service
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { User } from './../../models/user.interface';
import * as firebase from 'firebase/app';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFirestore, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/switchMap';
@Injectable()
export class AuthService {
constructor (
private afAuth: AngularFireAuth,
private afs: AngularFirestore,
private router: Router
) { }
// Your authentication logic goes here.
}
Ensure your read write rules are properly set up in the Firebase console. Also, enable one or more login services through the console.
From console.firebase.google.com/project stuff/database/firestore/rules
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write;
}
}
}
Lastly, import your auth service and inject it into the component constructor wherever authentication services are needed.
My similar error was due to incorrect importing from angualrFire2, causing issues during ng serve that indicated conflicting modules with casing differences. Make sure to rectify any such discrepancies.
Note: You can also create a generic firestore service to handle CRUD operations for your app akin to our custom auth service.