Can not inject service with Firestore witten in documentation

[benzmarkus]

trafficstars

Version info

Angular: 12

Firebase: newest

AngularFire: newest

How to reproduce these conditions

Used these modules in my app and then i created a simple service. @NgModule({ declarations: [ AppComponent ], imports : [ BrowserModule, HttpClientModule, BrowserAnimationsModule, RouterModule.forRoot(appRoutes, routerConfig),

    // Fuse, FuseConfig & FuseMockAPI
    FuseModule,
    FuseConfigModule.forRoot(appConfig),
    FuseMockApiModule.forRoot(mockApiServices),

    // Core module of your application
    CoreModule,

    // Layout module of your application
    LayoutModule,

    FlexLayoutModule,

    // 3rd party modules that require global configuration via forRoot
    MarkdownModule.forRoot({}),
    AngularFireAuthModule,
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
    provideFirestore(() => getFirestore()),
    AngularFireModule.initializeApp(environment.firebaseConfig)
],
providers: [
    { provide: PERSISTENCE, useValue: 'session' }, SampleService 
  ],
bootstrap   : [
    AppComponent
]

})

This is the service and i injected it in the app component.

@Injectable({ providedIn: "root" }) export class SampleService { public constructor(private db: Firestore) { } }

Debug output

Error Message from Console NullInjectorError: R3InjectorError(AppModule)[YoursEventService -> xc -> xc -> xc]: NullInjectorError: No provider for xc! at NullInjector.get (core.js:11101) at R3Injector.get (core.js:11268) at R3Injector.get (core.js:11268) at R3Injector.get (core.js:11268) at injectInjectorOnly (core.js:4751) at Module.ɵɵinject (core.js:4755) at Object.YoursEventService_Factory [as factory] (yours-event.service.ts:11) at R3Injector.hydrate (core.js:11438) at R3Injector.get (core.js:11257) at NgModuleRef$1.get (core.js:25332)

Expected behavior

Can inject the service

Actual behavior

Throws error

[google-oss-bot]

This issue does not seem to follow the issue template. Make sure you provide all the required information.

[benzmarkus]

Some ideas ?

[benzmarkus]

FirestoreModule was missing! Documentation should be updated.

[jorgutdev]

I encounter a similar issue trying to use Firestore. It was really dumb:

Using your example:

@Injectable({
  providedIn: "root"
})
export class SampleService {
  public constructor(private db: Firestore) {
  }
}

Problem was I was importing Firestore from firebase/firestore

import { Firestore } from 'firebase/firestore';      <--- WRONG
import { Firestore } from '@angular/fire/firestore'; <---- Use this one instead

[ashikjs]

Anyone get any solution ?