Error in staticinjectorerror (appmodule) Angular 5

Question

Error in staticinjectorerror (appmodule) Angular 5

Navigation

#1 by (0 votes)

2

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:

SERVICE

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

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

@Injectable({
  providedIn: 'root'
})
export class TareaService {

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

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

  InsertarTarea(tarea:Tarea){
    this.ListaTareas.push({
      nombre:tarea.nombre
    })
  }

  ActualizarTarea(tarea:Tarea){
    this.ListaTareas.update(tarea.$key,{
      nombre:tarea.nombre
    })
  }

  EliminarTarea($key: string){
    this.ListaTareas.remove($key);
  }
}

COMPONENT

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

@Component({
  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();
  //   }
  // }

}

angular

asked by Esteban Calle 24.08.2018 в 17:04

source

1 answer

Notice: Undefined index: Sending variable by post Problems with loading the image into an HTML file by saving

score 0 · Answer 1

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:

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase) // en donde estan tus llaves de firebase
    AngularFireDatabaseModule,
    // 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 .