[AngularFirestore -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]:

Version info

Angular CLI: 12.2.7 Node: 14.16.0 Package Manager: npm 6.14.11 OS: win32 x64

Angular: 12.2.7 … animations, cli, common, compiler, compiler-cli, co … platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1200.5 @angular-devkit/build-angular 12.2.7 @angular-devkit/core 12.2.7 @angular-devkit/schematics 12.2.7 @angular/fire 7.0.4 rxjs 6.6.7
typescript 4.3.5

How to reproduce these conditions

I tried to u firebase whi modular lazy load and call fireAngular from a service but when i call the route i got this error : NullInjectorError: R3InjectorError(DashboardModule)[AngularFirestore -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]: NullInjectorError: No provider for InjectionToken angularfire2.app.options!

Failing test unit, Stackblitz demonstrating the problem

Steps to set up and reproduce

Sample data and security rules

Debug output

** Errors in the JavaScript console **

** Output from firebase.database().enableLogging(true); **

** Screenshots **

I have tried to provide angularFire in my app.module and as well in my dashboard lazy module but nothing works

Expected behavior

Actual behavior

[jagdishjadeja]

i am also facing same issue can someone provide solution for this issue ?

[cevaris]

@jamesdaniels are you saying we cannot use compat imports in Components when using provider* functions in Modules?

If so, how else can we import the follolwing

import {
    AngularFirestore,
    AngularFirestoreDocument
} from '@angular/fire/compat/firestore';

EDIT I got this working by converting all angularfire imports to use compat paths.

app.module.ts

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
...
@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule.enablePersistence(),
    AngularFireStorageModule,
    ....

And in my component, I used the following imports

import { AngularFireAuth } from '@angular/fire/compat/auth';
import {
  AngularFirestore,
  AngularFirestoreDocument
} from '@angular/fire/compat/firestore';
...

See upgrade guide for now.

Most developers can stop here for now as the new API isn’t feature complete.

Apparently, the new API is not even feature complete yet…