NullInjectorError: Kein Anbieter für AngularFirestore

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 ...

Sie sollten hinzufügen providers: [AngularFirestore]in app.module.ts.

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase)
  ],
  declarations: [ AppComponent ],
  providers: [AngularFirestore],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Ich hatte das gleiche Problem und unten ist behoben.

Alter Servicecode:

@Injectable()

Aktualisierter funktionierender Service-Code:

@Injectable({
  providedIn: 'root'
})

Öffnen: ./src/app/app.module.ts
Und importieren Sie oben Firebase-Module:

{ Umgebung } aus '../environments/environment' importieren;
{ AngularFireModule } aus 'angularfire2' importieren;
{ AngularFirestoreModule } aus 'angularfire2 / firestore' importieren ;

Und SEHR WICHTIG:
Denken Sie daran, die 'Importe' in NgModule zu aktualisieren:

@NgModule({
  declarations: [
    AppComponent,
    OtherComponent // Add other components here
    ...
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase, 'your-APP-name-here'),
    AngularFirestoreModule
  ],
  ...
})

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!

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.

Das Hinzufügen AngularFirestoreModule.enablePersistence()im Importbereich hat mein Problem behoben:

imports: [
    BrowserModule, AngularFireModule, 
    AngularFireModule.initializeApp(config),
    AngularFirestoreModule.enablePersistence()
]

Ich habe dieses Problem gelöst, indem ich den Firestore aus entfernt habe:

import { AngularFirestore } from '@angular/fire/firestore/firestore';

in meiner component.ts Datei. nur zur Verwendung:

import { AngularFirestore } from '@angular/fire/firestore';

Dies kann auch Ihr Problem sein.

Für AngularFire2 Neueste Version

Installieren Sie AngularFire2

$ npm install --save firebase @angular/fire

Aktualisieren Sie dann die Datei app.module.ts

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';

    import { AppComponent } from './app.component';
    import { FormsModule } from '@angular/forms';


    import { AngularFireModule } from '@angular/fire';
    import { AngularFireDatabaseModule } from '@angular/fire/database';
    import { environment } from '../environments/environment';
    import { AngularFirestoreModule } from '@angular/fire/firestore';


    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,

        AngularFireModule.initializeApp(environment.firebase),
        AngularFirestoreModule,
        AngularFireDatabaseModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

Lesen Sie hier das FireStore CRUD-Lernprogramm

Ändern Sie Ihren Import von:

import { AngularFirestore } from '@angular/fire/firestore/firestore';

Dazu:

import { AngularFirestore } from '@angular/fire/firestore';

Das löst mein Problem.

Ich nehme das zu meinem app.module. Nach dem Import sollte es funktionieren

providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy },
    { provide: FirestoreSettingsToken, useValue: {} }
  ],

Meine Version:

Angular CLI: 7.2.4
Node: 10.15.0
Angular: 7.2.5
... common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.12.4
@angular-devkit/build-angular     0.12.4
@angular-devkit/build-optimizer   0.12.4
@angular-devkit/build-webpack     0.12.4
@angular-devkit/core              7.2.4
@angular-devkit/schematics        7.2.4
@angular/animations               8.0.0-beta.4+7.sha-3c7ce82
@angular/cdk                      7.3.2-3ae6eb2
@angular/cli                      7.2.4
@angular/fire                     5.1.1
@angular/flex-layout              7.0.0-beta.23
@angular/material                 7.3.2-3ae6eb2
@ngtools/webpack                  7.2.4
@schematics/angular               7.2.4
@schematics/update                0.12.4
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.28.4

import angularFirebaseStore 

in app.module.tsund setzen Sie es als Anbieter wie Service

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:

npm install @angular/fire firebase --save

In meiner app / app.module.ts :

...
import { AngularFireModule } from '@angular/fire';
import { environment } from '../environments/environment';
import { AngularFirestoreModule, SETTINGS } from '@angular/fire/firestore';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule
  ],
  providers: [
    { provide: SETTINGS, useValue: {} }
  ],
  bootstrap: [AppComponent]
})

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:

import { AngularFirestore } from "@angular/fire/firestore";

Aus irgendeinem Grund importierte vscode es als "@ angle / fire / firestore / firestore"; I Nach dem Ändern für "@ angle / fire / firestore"; Das Problem wurde behoben!