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 inte.net. 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.
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
],
Import HttpClientModule into app.module.ts and add HttpClientModule to imports array.
import { HttpClientModule } from '@angular/common/http';
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
],
Check in your service whether @Injectable
annotation is as shown below:
@Injectable({
providedIn: 'root'
})
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
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
If you are using libraries and add firebase
as dependency
, you have to keep both place with the same version
Meaning if
"dependencies": {
"@my/lib": "1.0.0",
"firebase": "7.22.0"
}
"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
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)
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 {
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.