• I can without any problem set up Firebase Realtime database in a service according to the GitHub modular sample codes. I know it works because I can read, write and listen to data changes in the Firebase Realtimedatabase without any problem.

• But when I try to add also Firestore to the project suddenly my build crashes with weird error in console stating the No provider for ka!.

The full error log from console:

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(HomePageModule)[FirebaseService -> FirebaseService -> ka -> ka -> ka]: 
  NullInjectorError: No provider for ka!
NullInjectorError: R3InjectorError(HomePageModule)[FirebaseService -> FirebaseService -> ka -> ka -> ka]: 
  NullInjectorError: No provider for ka!
    at NullInjector.get (core.js:11100)
    at R3Injector.get (core.js:11267)
    at R3Injector.get (core.js:11267)
    at R3Injector.get (core.js:11267)
    at injectInjectorOnly (core.js:4751)
    at ɵɵinject (core.js:4755)
    at Object.FirebaseService_Factory [as factory] (ɵfac.js? [sm]:1)
    at R3Injector.hydrate (core.js:11437)
    at R3Injector.get (core.js:11256)
    at NgModuleRef$1.get (core.js:25365)
    at resolvePromise (zone.js:1255)
    at resolvePromise (zone.js:1209)
    at zone.js:1321
    at ZoneDelegate.invokeTask (zone.js:434)
    at Object.onInvokeTask (core.js:28692)
    at ZoneDelegate.invokeTask (zone.js:433)
    at Zone.runTask (zone.js:205)
    at drainMicroTaskQueue (zone.js:620)

My app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { ChartsModule } from 'ng2-charts';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import { getDatabase, provideDatabase } from '@angular/fire/database';


import { environment } from 'src/environments/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    ChartsModule,
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
    provideFirestore(() => getFirestore()),
    provideDatabase(() => getDatabase()),
    ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Relevant code for my firebase.service.ts service:

import { Injectable } from '@angular/core';
import { Database, objectVal, ref, getDatabase, set, get, onValue, onChildAdded } from '@angular/fire/database';
import { Firestore, collection, addDoc } from "firebase/firestore";

import { ChartDataSets, ChartOptions } from 'chart.js';
import { Color, Label } from 'ng2-charts';
import { Chart } from 'chart.js';

@Injectable({
  providedIn: 'root'
})
export class FirebaseService {
  constructor(
    public database: Database,
    public firestore: Firestore
    ) {
  }

  writeUserData(path, name, email) {
    set(ref(this.database, path), {
      username: name,
      email: email
    });
  }

  async writeTest(uid: string, from: string, to: string) {
    try {
      const docRef = await addDoc(collection(this.firestore, "users"), {
        first: "Ada",
        last: "Lovelace",
        born: 1815
      });
      console.log("Document written with ID: ", docRef.id);
    } catch (e) {
      console.error("Error adding document: ", e);
    }
  }
}

CodePudding user response：

I am using the following method in order to provide Firebase to my Angular apps without issues:

imports: [
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
    AngularFirestoreModule,
    // ... more imports
]

This will probably resolve your issue.

CodePudding user response：

Adding the class FirebaseService to providers array in app.module.ts solves.

CodePudding user response：

Thank you all for answers but unfortunetly the problem was somewhere else.

Look closely at my imports in the service:

import { ... } from '@angular/fire/database';
import { ... } from "firebase/firestore";

If I change my imports to this all works as it should (without any other changes):

import { ... } from '@angular/fire/database';
import { ... } from '@angular/fire/firestore';

Why other answers are slightly incorrect (but they still put me into the right path):

• I don't need to add any Providers as @Sham Karthik S suggested. And if you look into GitHub sample code there are no Providers also.
• And @mikegross I think is only working with compact Angularfire. I am trying to use the new modular.