ERROR NullInjectorError: R3InjectorError(AppModule)

Question

I am trying to save the value from my component to firebase using service. But I am getting NullInjector Error when ever I use service. I did everything that was not the internet. Imported everything but it wont work. I already tried importing HttpClientModule, AngularFireDatabase but nothing works. I have tried to completely recreate the project by freshly installing everything. I have tried different versions of firebase and angular (currently [email protected] @angular/[email protected]). Nothing works.

This is my fireservice.service

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';

@Injectable({
  providedIn: 'root'
})
export class FireserviceService {

  constructor(private db: AngularFireDatabase) {
    
   }
   create(){
    return this.db.list('/shopping-carts').push({
      dateCreated:new Date().getTime()
    });
  }
}

this is my app module

import { FireserviceService } from './fireservice.service';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { environment } from '../environments/environment';
import { AngularFirestore } from '@angular/fire/firestore';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { BrainComponent } from './brain/brain.component';


@NgModule({
  declarations: [
    AppComponent,
    BrainComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule
  ],
  providers: [
    AngularFirestore,
    FireserviceService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { 
  constructor(){

  }
}

this is my compnent

import { FireserviceService } from './../fireservice.service';
import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'brain',
  templateUrl: './brain.component.html',
  styleUrls: ['./brain.component.css']
})
export class BrainComponent  {

  constructor(private cartService: FireserviceService) { }
  addToCart(val:any){
    console.log(val)
  }

}

This is the error I get

core.js:6142 ERROR NullInjectorError: R3InjectorError(AppModule)[FireserviceService -> AngularFireDatabase -> AngularFireDatabase -> AngularFireDatabase]: 
  NullInjectorError: No provider for AngularFireDatabase!
    at NullInjector.get (http://localhost:51081/vendor.js:38768:27)
    at R3Injector.get (http://localhost:51081/vendor.js:38935:33)
    at R3Injector.get (http://localhost:51081/vendor.js:38935:33)
    at R3Injector.get (http://localhost:51081/vendor.js:38935:33)
    at injectInjectorOnly (http://localhost:51081/vendor.js:32465:33)
    at Module.ɵɵinject (http://localhost:51081/vendor.js:32469:61)
    at Object.FireserviceService_Factory [as factory] (http://localhost:51081/main.js:280:159)
    at R3Injector.hydrate (http://localhost:51081/vendor.js:39103:35)
    at R3Injector.get (http://localhost:51081/vendor.js:38924:33)
    at NgModuleRef$1.get (http://localhost:51081/vendor.js:53004:33)

The site works fine until I add parameters to the constructor in the brain component. But as soon as I add private car service: FireserviceService in the constructor in the brain component it won't even load HTML. I am new to angular and firebase. I am trying to save the value in the firebase database. Please help.

Answer 1

You can see from the error message that the dependency container is missing a provider for AngularFireDatabase:

" No provider for AngularFireDatabase"

If you use AngularFireDatabase you need to import that service in app.module.ts in providers - you're currently importing AngularFirestore.

  providers: [
    AngularFireDatabase,
    FireserviceService
  ],

Answer 2

Import HttpClientModule into app.module.ts and add HttpClientModule to imports array.

import { HttpClientModule } from '@angular/common/http';

 imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],