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 firebase@7.24.0 @angular/fire@6.0.3). 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 cartService: 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
  ],

Answer 3

Check in your service whether @Injectable annotation is as shown below:

@Injectable({
  providedIn: 'root'
})

Answer 4

This is because you are trying to use Angular Fire Database but imported Angular Firestore Module and Angular Firestore in app module.

Replace AngularFirestoreModule with AngularFireDatabaseModule and AngularFirestore with AngularFireDatabase in app.module.ts

  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule
  ],
  providers: [
    AngularFireDatabase,
    FireserviceService
  ],

However, I will recommend to use Angular Firestore instead of Angular Fire Database if you are starting new.

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

Answer 5

This thread may help,

If you are using libraries and add firebase as dependency, you have to keep both place with the same version

Meaning if

MainApp

"dependencies": { 
  "@my/lib": "1.0.0",
  "firebase": "7.22.0" 
}

@my/lib

"dependencies": { 
  "firebase": "7.24.0"  // <-- The version is higher
}

Then you will face the same error. The way to fix this would be to bump the @another/lib version into MainApp from 7.22.0 to 7.24.0.

See the linked issue to see why you shouldn't import it into the dependencies but into the peerDependencies

Answer 6

I Has same issue. I fixed this by changing from

import { Database, onValue, ref, set } from "firebase/database";

to

import { Database, onValue, ref, set } from "@angular/fire/database";

in service. (Angular 13 & Fire 7.3.0)

Answer 7

you should check if yo have imported the HttpClientModule since services usually uses it and I didn't see it in your code. Try it and give me some feedback! I had this same problem and I did solve it by importing the HttpClientModule

I have imported it in app.module like this

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    HttpClientModule // HERE
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

and also you should check if you have de @Injectable decorator with the providedIn: 'root' in the service class like this

@Injectable({
  providedIn: 'root' // HERE
})
export class SocialPostsService {

Answer 8

This should work for you :

In your app.module.ts > imports:[ ]

Replace this :

provideFirebaseApp(() => initializeApp(environment.firebase)),
provideFirestore(() => getFirestore())

with this :

AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule