Description
Version info
Angular:
13.2.0
Firebase:
6.2.0
AngularFire:
7.2.2
Other (e.g. Ionic/Cordova, Node, browser, operating system):
How to reproduce these conditions
import { Firestore } from 'firebase/firestore
Failing test unit, Stackblitz demonstrating the problem
Steps to set up and reproduce
I had a difficult to debug null injector error when upgrading to angular v13, firebase v9, angular/fire v7, which I fixed but wanted to make reference so others might be able to find and fix faster than I did.
core.mjs:6485 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(... ) -> FirestoreService -> ka -> ka -> ka
This seemed to be caused by naïve import statement in my firestore service
import { Firestore } from 'firebase/firestore';
should have been
import { Firestore } from 'angular/fire/firestore';
There are a lot of cases where it doesn't seem to matter which library you import from and angular/fire is just proxying the type straight through from firebase, but this one must be different. Maybe something could be added to docs to help people avoid this. I let VS Code do my importing and it cost me quite a bit of time.
Sample data and security rules
Debug output
** Errors in the JavaScript console **
** Output from firebase.database().enableLogging(true); **
core.mjs:6485 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(... ) -> FirestoreService -> ka -> ka -> ka
** Screenshots **