Ich lerne Angular und suche nach Hilfe bei der Behebung des Fehlers: Ich folge diesem Link: https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md , um einen kleinen Winkel zu erstellen App mit Angular2 und AngularFirestore2
aber wenn ich ng serviere, erhalte ich den folgenden Fehler in der Browserkonsole.
StaticInjectorError[AngularFirestore]:
StaticInjectorError[AngularFirestore]:
NullInjectorError: No provider for AngularFirestore!
at _NullInjector.get (core.js:923)
at resolveToken (core.js:1211)
at tryResolveToken (core.js:1153)
at StaticInjector.get (core.js:1024)
at resolveToken (core.js:1211)
at tryResolveToken (core.js:1153)
at StaticInjector.get (core.js:1024)
at resolveNgModuleDep (core.js:10585)
at NgModuleRef_.get (core.js:11806)
at resolveDep (core.js:12302)
Ich habe versucht, es zu googeln, aber nicht die genaue Lösung gefunden. Nichts hat bei mir funktioniert :(,
Folgendes habe ich befolgt: 1) Installierter Knoten Version 8.9.1 2) npm install -g @ angle / cli -> Version 1.5.2 3) ng neuer 'Projektname' 4) npm install angularfire2 firebase --save
Hier ist meine Datei app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';
import { environment } from '../environments/environment';
@NgModule({
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebase)
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {}
app.component.ts:
import { Component } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
constructor(db: AngularFirestore) {}
}
environemnt.ts:
export const environment = {
production: false,
firebase: {
apiKey: 'xxxxx',
authDomain: 'aaaaaaa',
databaseURL: 'bbbbbbbbbbbbbbbbbb',
projectId: 'aaaaaaaaaaaaaa',
storageBucket: 'aaaaaaaaaaaa',
messagingSenderId: 'aaaaaaaaaaaaa'
}
};
dann ng dienen, und ich bekomme den obigen Fehler ...
angular
firebase
google-cloud-firestore
angularfire2
Entwickler
quelle
quelle
Antworten:
Sie sollten hinzufügen
providers: [AngularFirestore]
inapp.module.ts
.quelle
import
ingAngularFirestoreModule
, wie die Dokumentation sagt, was vermutlich um alles kümmert einschließlich erklärtAngularFirestore
als Anbieter.CTRL+C
dasionic serve
und es neu zu starten ... (passiert oft aus irgendeinem Grund seit Ionic 3 ..)Ich hatte das gleiche Problem und unten ist behoben.
Alter Servicecode:
Aktualisierter funktionierender Service-Code:
quelle
providedIn
Argument ist nur in Angular 6 und höher verfügbar.Öffnen:
./src/app/app.module.ts
Und importieren Sie oben Firebase-Module:
Und SEHR WICHTIG:
Denken Sie daran, die 'Importe' in NgModule zu aktualisieren:
Probieren Sie es aus, es soll jetzt funktionieren.
Ausführliche Informationen finden Sie in der Angularfire2- Dokumentation:
https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md
Viel Glück!
quelle
Das Seltsame für mich war, dass ich den Anbieter hatte: [], aber das HTML-Tag, das den Anbieter verwendet, hat den Fehler verursacht. Ich beziehe mich auf das rote Kästchen unten:
Es stellte sich heraus, dass ich zwei Klassen in verschiedenen Komponenten mit demselben Dateinamen "employee-list.component.ts" hatte und das Projekt daher gut kompiliert wurde, aber die Referenzen waren alle durcheinander.
quelle
Das Hinzufügen
AngularFirestoreModule.enablePersistence()
im Importbereich hat mein Problem behoben:quelle
Ich habe dieses Problem gelöst, indem ich den Firestore aus entfernt habe:
in meiner component.ts Datei. nur zur Verwendung:
Dies kann auch Ihr Problem sein.
quelle
Für AngularFire2 Neueste Version
Installieren Sie AngularFire2
Aktualisieren Sie dann die Datei app.module.ts
Lesen Sie hier das FireStore CRUD-Lernprogramm
quelle
Ändern Sie Ihren Import von:
Dazu:
Das löst mein Problem.
quelle
Ich nehme das zu meinem app.module. Nach dem Import sollte es funktionieren
Meine Version:
quelle
in
app.module.ts
und setzen Sie es als Anbieter wie Servicequelle
Ich hatte das gleiche Problem beim Hinzufügen von Firebase zu meiner Ionic App. Um das Problem zu beheben, habe ich die folgenden Schritte ausgeführt:
In meiner app / app.module.ts :
Zuvor haben wir FirestoreSettingsToken anstelle von SETTINGS verwendet. Aber dieser Fehler wurde behoben, jetzt verwenden wir EINSTELLUNGEN. ( Link )
In meiner App / services / myService.ts habe ich Folgendes importiert:
Aus irgendeinem Grund importierte vscode es als "@ angle / fire / firestore / firestore"; I Nach dem Ändern für "@ angle / fire / firestore"; Das Problem wurde behoben!
quelle