ERROR NullInjectorError: R3InjectorError(AppModule)

user_14629851 0
Viewed 109603

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 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.

angular firebase
7 Answers

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
  ],
user_122618290

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

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

 imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
user_48475650

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

@Injectable({
  providedIn: 'root'
})
user_167146360

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

user_120562700

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
user_98543720

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

user_111351740

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)

user_186723870
Related