Error in staticinjectorerror (appmodule) Angular 5


Hi, I'm trying to add some directives to a form to be able to send them, but when I set the [(ngModel)]="tareaService.TareaSeleccionada.nombre" directive, I get this error.

ERROR Error: StaticInjectorError(AppModule)[TareaService -> AngularFireDatabase]: 
  StaticInjectorError(Platform: core)[TareaService -> AngularFireDatabase]: 
    NullInjectorError: No provider for AngularFireDatabase!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1062)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1244)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
    at resolveToken (core.js:1300)
    at tryResolveToken (core.js:1244)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1141)
    at resolveNgModuleDep (core.js:8376)
    at _createClass (core.js:8421)
    at _createProviderInstance (core.js:8393)

The object "taskService" was declared in the component and I imported it in the app.module.ts , so there would be no problem on that side, it is also curious because even if you delete the form, the error continues, as well that the error is not in the form but it can be in the component or the service, here I add them:


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

// Clase
import { Tarea } from '../clases/tarea';

  providedIn: 'root'
export class TareaService {

  ListaTareas: AngularFireList <any>;
  TareaSeleccionada:Tarea= new Tarea();
  constructor(private firebase: AngularFireDatabase) { }

    return this.ListaTareas=this.firebase.list('tareitas');



  EliminarTarea($key: string){


    import { Component, OnInit } from '@angular/core';
import { NgForm} from '@angular/forms';
// Servicios
import { TareaService } from '../../../servicios/tarea.service';
import { Tarea } from '../../../clases/tarea';

  selector: 'app-tarea',
  templateUrl: './tarea.component.html',
  styleUrls: ['./tarea.component.css']
export class TareaComponent implements OnInit {

  constructor(private tarea: TareaService) { }

  ngOnInit() {

  // reiniciarFormuario(formulario: NgForm){
  //   if(formulario!=null){
  //     formulario.reset();
  //     this.tareaService.TareaSeleccionada=new Tarea();
  //   }
  // }

asked by Esteban Calle 24.08.2018 в 17:04

1 answer


It's not a problem with your policy. The real error is:


NullInjectorError: No provider for AngularFireDatabase!

Which means that no is initializing AngularFire2 and AngularFireDatabase the correct way.

Configuration instructions indicate that you must enter your AppModule the settings of your Firebase project , in addition to adding AngularFireDatabaseModule . You would have something like:

  imports: [
    AngularFireModule.initializeApp(environment.firebase) // en donde estan tus llaves de firebase
    // Otros modulos que necesités...
    // AngularFireAuthModule,
    // el resto de tu AppModule
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
export class AppModule {}

In this way your TareaService will have access to the provider of AngularFireDatabase .

answered by 25.08.2018 в 03:01