NullInjectorError: Không có nhà cung cấp cho AngularFirestore

Tôi đang học Angular đang tìm kiếm trợ giúp trong việc sửa lỗi: Tôi đang theo liên kết sau: https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md để tạo một góc nhỏ ứng dụng với angle2 và anglefirestore2

nhưng khi tôi nhấn phục vụ, tôi gặp lỗi bên dưới trong bảng điều khiển trình duyệt ..

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)

Tôi đã thử googling nó nhưng không tìm thấy giải pháp chính xác, không có gì phù hợp với tôi :(,

Đây là những gì tôi đã làm theo: 1) Phiên bản Node đã cài đặt 8.9.1 2) npm install -g @ angle / cli -> Phiên bản 1.5.2 3) ng mới 'project-name' 4) npm cài đặt firebase anglefire2 --save

Đây là tệp app.module.ts của tôi:

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'
  }
};

sau đó ng phục vụ, và tôi nhận được lỗi ở trên ...

Bạn nên thêm providers: [AngularFirestore]vào app.module.ts.

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

Tôi đã gặp vấn đề tương tự và bên dưới đã được giải quyết.

Mã dịch vụ cũ:

@Injectable()

Mã dịch vụ hoạt động được cập nhật:

@Injectable({
  providedIn: 'root'
})

Mở: ./src/app/app.module.ts
Và nhập Mô-đun Firebase ở trên cùng:

nhập { môi trường } từ '../enosystem/enosystem';
nhập { AngularFireModule } từ 'anglefire2';
nhập { AngularFirestoreModule } từ 'anglefire2 / firestore';

Và RẤT QUAN TRỌNG:
Hãy nhớ cập nhật 'nhập khẩu' trong NgModule:

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

Hãy thử, nó sẽ hoạt động.
Để biết thông tin chi tiết, hãy làm theo tài liệu anglefire2 :
https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md
Chúc may mắn!

Điều kỳ lạ đối với tôi là tôi có trình cung cấp: [], nhưng thẻ HTML sử dụng trình cung cấp là nguyên nhân gây ra lỗi. Tôi đang đề cập đến hộp màu đỏ bên dưới:

Hóa ra tôi có hai lớp trong các thành phần khác nhau có cùng tên tệp "worker-list.component.ts" và do đó, dự án được biên dịch tốt, nhưng tất cả các tham chiếu đều bị rối tung.

Thêm AngularFirestoreModule.enablePersistence()vào phần nhập đã giải quyết vấn đề của tôi:

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

Tôi đã giải quyết vấn đề này bằng cách xóa firestore khỏi:

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

trong tệp component.ts của tôi. như chỉ sử dụng:

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

đây cũng có thể là vấn đề của bạn.

Đối với AngularFire2 Phiên bản mới nhất

Cài đặt AngularFire2

$ npm install --save firebase @angular/fire

Sau đó cập nhật tệp 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 { }

Kiểm tra hướng dẫn vận hành FireStore CRUD tại đây

Thay đổi nhập của bạn từ:

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

Tới đây:

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

Điều này giải quyết vấn đề của tôi.

Tôi đưa điều đó vào app.module của mình. Sau khi nhập khẩu, nó sẽ hoạt động

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

Phiên bản của tôi:

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 

trong app.module.tsvà thiết lập nó như là một nhà cung cấp như dịch vụ

Tôi đã gặp vấn đề tương tự khi thêm firebase vào Ứng dụng Ionic của mình . Để khắc phục sự cố, tôi đã làm theo các bước sau:

npm install @angular/fire firebase --save

Trong ứng dụng / app.module.ts của tôi :

...
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]
})

Trước đây chúng tôi sử dụng FirestoreSettingsToken thay vì SETTINGS. Nhưng lỗi đó đã được giải quyết, bây giờ chúng tôi sử dụng SETTINGS. ( liên kết )

Trong ứng dụng / dịch vụ / myService.ts của tôi, tôi đã nhập dưới dạng:

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

Vì lý do nào đó mà vscode đã nhập nó thành "@ angle / fire / firestore / firestore"; Tôi Sau khi thay đổi nó thành "@ angle / fire / firestore"; vấn đề đã được giải quyết!