J'essaye d'insérer les données du formulaire dans la base de données Cloud Firestore. Voici mon fichier x.component.ts dans lequel j'obtiens une erreur au niveau du constructeur où j'écris
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { environment } from '../environments/environment'
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFirestoreModule, AngularFirestore } from '@angular/fire/firestore';
import { GroupsComponent } from './groups/groups.component';
import { GroupComponent } from './groups/group/group.component';
import { GroupListComponent } from './groups/group-list/group-list.component'
import { GroupService } from './groups/shared/group.service';
import { FormsModule } from '@angular/forms'
@NgModule({
declarations: [
AppComponent,
GroupsComponent,
GroupComponent,
GroupListComponent
],
imports: [
BrowserModule,
AngularFirestoreModule,
AngularFireDatabaseModule,
AngularFireModule.initializeApp(environment.firebaseConfig),
FormsModule
],
providers: [AngularFirestore, GroupService],
bootstrap: [AppComponent]
})
export class AppModule { }
L'erreur que j'obtiens est comme ci-dessous.
ERREUR Erreur: StaticInjectorError (AppModule) [AngularFirestore -> InjectionToken angularfire2.app.options]: StaticInjectorError (Platform: core) [AngularFirestore -> InjectionToken angularfire2.app.options]: NullInjectorError: No provider for angularfire2.appions. ! à NullInjector.push ../ node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js: 8895) à resolutionToken (core.js: 9140) à tryResolveToken (core.js: 9084) à StaticInjector .push ../ node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js: 8981) sur resolToken (core.js: 9140) sur tryResolveToken (core.js: 9084) sur StaticInjector.push ../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js: 8981) à resolutionNgModuleDep (core.js: 21217) à _createClass (core.js: 21270) à _createProviderInstance (core.js) : 21234)
J'avais suivi les liens ci-dessous mais pas de chance.
Non fournisseur pour InjectionToken angularfire2 .app.options
Voici mon fichier app.module.ts.
private firestore: AngularFireStore
import { Component, OnInit } from '@angular/core';
import { GroupService } from '../shared/group.service';
import { NgForm } from '@angular/forms';
// import { NullTemplateVisitor } from '@angular/compiler';
import { AngularFirestore } from '@angular/fire/firestore';
// import { AngularFireModule } from 'angularfire2';
// import { AngularFirestoreModule } from 'angularfire2/firestore';
@Component({
selector: 'app-group',
templateUrl: './group.component.html',
styleUrls: ['./group.component.css']
})
export class GroupComponent implements OnInit {
constructor(private groupService: GroupService, private firestore: AngularFirestore) { }
ngOnInit() {
this.resetForm();
}
resetForm(form ?: NgForm){
if(form!= null)
form.resetForm();
this.groupService.formData = {
$key : null,
firstname: '',
lastname: '',
age: null
}
}
onSubmit(form : NgForm){
let data = form.value;
// this.firestore.collection('groups').add(data);
this.resetForm(form);
}
}
3 Réponses :
L'erreur vient probablement de la tentative d'ajout de AngularFirestore aux fournisseurs de votre AppModule . AngularFirestore devient disponible pour l'injection lorsque AngularFirestoreModule est importé dans le module. Supprimez AngularFirestore des providers:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { environment } from '../environments/environment'
import { GroupsComponent } from './groups/groups.component';
import { GroupComponent } from './groups/group/group.component';
import { GroupListComponent } from './groups/group-list/group-list.component'
import { GroupService } from './groups/shared/group.service';
import { FormsModule } from '@angular/forms';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/database';
@NgModule({
declarations: [
AppComponent,
GroupsComponent,
GroupComponent,
GroupListComponent
],
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFirestoreModule,
AngularFireDatabaseModule,
FormsModule
],
providers: [GroupService],
bootstrap: [AppComponent]
})
export class AppModule { }
Veuillez également noter les chemins d'importation mis à jour. Ces chemins proviennent directement de la documentation d'installation .
Assurez-vous également que vous n'avez que @ angular / fire dans vos dépendances et non à la fois @ angular / fire et angularfire2 . Cela étant dit, ne faites référence qu'à @ angular / fire dans vos importations et supprimez angularfire2 de votre package.json et de toutes les importations. P >
J'espère que cela vous aidera!
L'importation pour AngularFireDatabaseModule est incorrecte. Pouvez-vous s'il vous plaît essayer de changer l'importation de ce module en import {AngularFireDatabaseModule} depuis '@ angular / fire / database'; . Sans ce changement, j'obtiens une erreur qui empêche l'application de même démarrer. Veuillez consulter la question mise à jour et les importations de modules Firebase mis à jour.
@Virus Pouvez-vous également confirmer la version @ angular / fire que vous avez dans votre package.json ? Pouvez-vous également confirmer que vous n'avez pas à la fois @ angular / fire et angularfire2 dans votre package.json , que vous n'avez que @ angulaire / feu .
Je pense connaître la réponse qui a résolu mon problème. Je devais juste importer la déclaration ci-dessous dans le service que j'ai créé et je dois créer un objet dans le constructeur du service.
import { AngularFirestore } from '@angular/fire/firestore';
La solution consiste donc à importer AngularFirestore depuis .
import { AngularFirestore } from 'angularfire2/firestore';
Au lieu de:
import { AngularFirestore } from '@angular/fire/firestore';
Veuillez partager le NgModule où vous importez les modules Firebase, y compris Firestore.
@AlexanderStaroselsky a téléchargé le fichier
Si je devais faire une supposition éclairée, vous devez définitivement supprimer AngularFirestore des fournisseurs de votre module. Il n'est pas censé y être ajouté. Il est disponible dans toute votre application une fois que vous importez le AngularFirestoreModule. Supprimez-le des fournisseurs et faites-moi savoir si cela aide.
Même erreur si je l'ai supprimé des fournisseurs.