core.mjs:6485 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(...) -> FirestoreService -> ka -> ka -> ka

[nayfin]

trafficstars

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 **

Expected behavior

Actual behavior