CODEWITHSUNDEEP
angularfirebase
bimal karki
bimal karki

Reputation: 551

ERROR NullInjectorError: R3InjectorError(AppModule)

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

Upvotes: 44

Views: 310027

Answers (12)

Sarad Vishwakama
Sarad Vishwakama

Reputation: 125

so if you are using angular 18 or above version then use below changes in app.config.ts file

providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideHttpClient()]

Upvotes: 0

Youcef Megoura
Youcef Megoura

Reputation: 163

This should work for you :

In your app.module.ts

Replace this :

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

with this :

AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule

Upvotes: 0

JanBrus
JanBrus

Reputation: 1520

My issue was missing this

import { initializeApp, provideFirebaseApp } from '@angular/fire/app';

@NgModule({
imports: [
  ...
  provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
  ...
],

in app.module.ts

Upvotes: 0

Yashwanth Veesarapu
Yashwanth Veesarapu

Reputation: 1

In main.ts

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { provideRouter } from '@angular/router';

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

export const appConfig: ApplicationConfig = 
{ providers [provideRouter(routes), importProvidersFrom(HttpClientModule)]};

Upvotes: 0

abdul moghni
abdul moghni

Reputation: 41

if you are facing this error in angular 17 version just remove all HTTP client module imports and go to appconfig.ts file inside app file

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

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideHttpClient()],
};

restart your application

Upvotes: 4

Marko S. González B.
Marko S. González B.

Reputation: 63

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 {

Upvotes: 1

Wojciech Marek
Wojciech Marek

Reputation: 11

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)

Upvotes: 1

Raphaël Balet
Raphaël Balet

Reputation: 8573

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

Upvotes: 1

ANKIT MISHRA
ANKIT MISHRA

Reputation: 606

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

Upvotes: 30

BloodShot
BloodShot

Reputation: 261

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

@Injectable({
  providedIn: 'root'
})

Upvotes: 25

Bhanu Pratap
Bhanu Pratap

Reputation: 1761

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

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

 imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],

Upvotes: 20

T. Sunil Rao
T. Sunil Rao

Reputation: 1257

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

Upvotes: 3

Related Questions