AngularFirestore InjectionToken Error - Angular v13 + Firestore v7

[uiahhh]

Version info

Angular:
13.0.3
Firebase:
9.4.0
AngularFire:
7.2.0
Other (operating system):
Windows 11 (build version 22000.348)

How to reproduce these conditions

Create a new angular project (using angular cli), then add angular fire (using angular cli)
Steps to set up and reproduce
ng new my-app
cd my-app
ng add @angular/fire (select Firestore option)
ng serve

Debug output

ERROR NullInjectorError: R3InjectorError(AppModule)[AngularFirestore -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]:
NullInjectorError: No provider for InjectionToken angularfire2.app.options!
at NullInjector.get (core.mjs:11120)
at R3Injector.get (core.mjs:11287)
at R3Injector.get (core.mjs:11287)
at R3Injector.get (core.mjs:11287)
at injectInjectorOnly (core.mjs:4767)
at Module.ɵɵinject (core.mjs:4771)
at Object.AngularFirestore_Factory [as factory] (angular-fire-compat-firestore.js:584)
at R3Injector.hydrate (core.mjs:11457)
at R3Injector.get (core.mjs:11276)
at NgModuleRef.get (core.mjs:21814)

Expected behavior

Get data from Firestore.

Actual behavior

Cannot get data from Firestore.

Current workaround

Replace "provideFirestore(() => getFirestore())," by "AngularFireModule.initializeApp(environment.firebase)," on AppModule.

[benyaminl]

Does this related to angular compact can't initialize?

√ Browser application bundle generation complete.

Initial Chunk Files | Names   | Raw Size
vendor.js           | vendor  |  4.03 MB |
main.js             | main    | 14.82 kB |
runtime.js          | runtime | 13.34 kB |

3 unchanged chunks

Build at: 2021-12-30T14:01:05.723Z - Hash: b84f3308c30498f1 - Time: 2321ms

Error: node_modules/@angular/fire/compat/proxy.d.ts:7:49 - error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any) => any'.
  Type 'T[FunctionPropertyNames<T>]' is not assignable to type '(...args: any) => any'.
    Type 'T[T[keyof T] extends Function ? keyof T : never]' is not assignable to type '(...args: any) => any'.
      Type 'T[keyof T]' is not assignable to type '(...args: any) => any'.
        Type 'T[string] | T[number] | T[symbol]' is not assignable to type '(...args: any) => any'.
          Type 'T[string]' is not assignable to type '(...args: any) => any'.

7     [K in FunctionPropertyNames<T>]: ReturnType<T[K]> extends Promise<any> ? K : never;
                                                  ~~~~


Error: node_modules/@angular/fire/compat/proxy.d.ts:10:49 - error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any) => any'.
  Type 'T[FunctionPropertyNames<T>]' is not assignable to type '(...args: any) => any'.
    Type 'T[T[keyof T] extends Function ? keyof T : never]' is not assignable to type '(...args: any) => any'.
      Type 'T[keyof T]' is not assignable to type '(...args: any) => any'.
        Type 'T[string] | T[number] | T[symbol]' is not assignable to type '(...args: any) => any'.
          Type 'T[string]' is not assignable to type '(...args: any) => any'.

10     [K in FunctionPropertyNames<T>]: ReturnType<T[K]> extends Promise<any> ? never : K;
                                                   ~~~~


Error: node_modules/@angular/fire/compat/proxy.d.ts:18:78 - error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any) => any'.
  Type 'T[NonPromiseReturningFunctionPropertyNames<T>]' is not assignable to type '(...args: any) => any'.
    Type 'T[ReturnType<T[FunctionPropertyNames<T>]> extends Promise<any> ? never : FunctionPropertyNames<T>]' is not assignable to type '(...args: any) => any'.
      Type 'T[FunctionPropertyNames<T>]' is not assignable to type '(...args: any) => any'.
        Type 'T[T[keyof T] extends Function ? keyof T : never]' is not assignable to type '(...args: any) => any'.
          Type 'T[keyof T]' is not assignable to type '(...args: any) => any'.
            Type 'T[string] | T[number] | T[symbol]' is not assignable to type '(...args: any) => any'.
              Type 'T[string]' is not assignable to type '(...args: any) => any'.

18     [K in NonPromiseReturningFunctionPropertyNames<T>]: (...args: Parameters<T[K]>) => Promise<ReturnType<T[K]>>;
                                                                                ~~~~


Error: node_modules/@angular/fire/compat/proxy.d.ts:18:107 - error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any) => any'.
  Type 'T[NonPromiseReturningFunctionPropertyNames<T>]' is not assignable to type '(...args: any) => any'.
    Type 'T[ReturnType<T[FunctionPropertyNames<T>]> extends Promise<any> ? never : FunctionPropertyNames<T>]' is not assignable to type '(...args: any) => any'.
      Type 'T[FunctionPropertyNames<T>]' is not assignable to type '(...args: any) => any'.
        Type 'T[T[keyof T] extends Function ? keyof T : never]' is not assignable to type '(...args: any) => any'.
          Type 'T[keyof T]' is not assignable to type '(...args: any) => any'.
            Type 'T[string] | T[number] | T[symbol]' is not assignable to type '(...args: any) => any'.
              Type 'T[string]' is not assignable to type '(...args: any) => any'.

18     [K in NonPromiseReturningFunctionPropertyNames<T>]: (...args: Parameters<T[K]>) => Promise<ReturnType<T[K]>>;
                                                                                                             ~~~~


Error: node_modules/@angular/fire/compat/proxy.d.ts:20:75 - error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any) => any'.
  Type 'T[PromiseReturningFunctionPropertyNames<T>]' is not assignable to type '(...args: any) => any'.
    Type 'T[ReturnType<T[FunctionPropertyNames<T>]> extends Promise<any> ? FunctionPropertyNames<T> : never]' is not assignable to type '(...args: any) => any'.
      Type 'T[FunctionPropertyNames<T>]' is not assignable to type '(...args: any) => any'.

20     [K in PromiseReturningFunctionPropertyNames<T>]: (...args: Parameters<T[K]>) => ReturnType<T[K]>;
                                                                             ~~~~


Error: node_modules/@angular/fire/compat/proxy.d.ts:20:96 - error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any) => any'.
  Type 'T[PromiseReturningFunctionPropertyNames<T>]' is not assignable to type '(...args: any) => any'.
    Type 'T[ReturnType<T[FunctionPropertyNames<T>]> extends Promise<any> ? FunctionPropertyNames<T> : never]' is not assignable to type '(...args: any) => any'.
      Type 'T[FunctionPropertyNames<T>]' is not assignable to type '(...args: any) => any'.

20     [K in PromiseReturningFunctionPropertyNames<T>]: (...args: Parameters<T[K]>) => ReturnType<T[K]>;
                                                                                                  ~~~~




× Failed to compile.

[uhmarcel]

Same with mac M1 while using FirebaseAuth

[jamesdaniels]

Cutting 7.2.1 with the fix now

[sansan88]

Same issue here while using AngularAuth:

• firebase": "^9.6.6",
• @angular/fire": "^7.2.1"
• typescript": "~4.4.4"

[dimarb]

I solved:

https://github.com/angular/angularfire/blob/4c877b146daf3dfff4d04d45ab49b2655872aab6/docs/install-and-setup.md

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire/compat';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase)
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {} 

[muhammad-usman-anwar]

I solved:

https://github.com/angular/angularfire/blob/4c877b146daf3dfff4d04d45ab49b2655872aab6/docs/install-and-setup.md

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire/compat';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase)
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {} 

@jamesdaniels the issue persists, while using the default providers(setup during initialization), have to resort to above comment

[soyaaroncervantes]

I'm still getting the error.

"angular": "13.3.0"
"firebase": "^9.4.0",
"@angular/fire": "^7.3.0",
"typescript": "~4.4.4"

And, if I try to use AngularFireModule.initializeApp(config).
It throws me this error

Uncaught TypeError: Se.auth is not a function

To make it work, I had to disable everything from AOT compiler

"buildOptimizer": false,
"extractLicenses": false,
"aot": false,
"optimization": true,
"commonChunk": true

[mayacr86]

Not sure if it's the exact same issue, but this solved it for me:

In your app.module.ts

import { FIREBASE_OPTIONS } from '@angular/fire/compat';

providers: [ { provide: FIREBASE_OPTIONS, useValue: environment.firebase } ],

Please refer to:

• https://stackoverflow.com/questions/71431785/angular-fire-no-provider-for-injectiontoken-angularfire2-app-options#answer-71445543
• https://stackoverflow.com/questions/69844586/nullinjectorerror-no-provider-for-injectiontoken-angularfire2-app-options-2021#answer-71821658

[frank1028]

mayacr86 solution worked for me.
Thank you mayacr86

[tomavic]

I am still getting the same error

NullInjectorError: R3InjectorError(HomePageModule)[AvatarService -> AvatarService -> Storage -> Storage -> Storage]: 
  NullInjectorError: No provider for Storage!

[miro-zone]

mayacr86 Thank you, your solution worked successfully:)

[biel4s]

@mayacr86 THANK YOU!

[grand-rick]

Thank you @mayacr86 💯