NullInjectorError: Không cung cấp cho AngularFirestore

Question

tôi đang học kiễu góc tìm kiếm một sự giúp đỡ trong sửa chữa các lỗi: tôi theo liên kết này: https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md để tạo ra một ứng dụng nhỏ góc với angular2 và angularfirestore2

nhưng khi tôi nhấn ng phục vụ tôi nhận được báo lỗi dưới đây trong trình duyệt của giao diện điều khiển ..

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 đã cố gắng googling nó nhưng không tìm ra giải pháp chính xác không có gì làm việc cho tôi :(,

đây là wh tại I đã theo dõi: 1) Phiên bản Nút cài đặt 8.9.1 2) npm install -g @ angular/cli -> Phiên bản 1.5.2 3) ng new 'project-name' 4) npm install angularfire2 firebase - tiết kiệm

Dưới đây là app.module.ts tập tin 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' 
    } 
}; 

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

Answer 1

Bạn nên thêm providers: [AngularFirestore] trong app.module.ts.

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

Answer 2

mở: ./src/app/app.module.ts
Và nhập khẩu căn cứ hỏa lực Modules tại trên cùng:

import { environment } from '../environments/environment';
import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/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ử, bây giờ nó sẽ làm việc.
Để biết thông tin chi tiết theo các tài liệu angularfire2:
https://github.com/angular/angularfire2/blob/master/docs/install-and-setup.md
Chúc may mắn!

Answer 3

Điều kỳ lạ đối với tôi là tôi có nhà cung cấp: [], nhưng thẻ HTML sử dụng 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 với cùng tên "employee-list.component.ts" và do đó dự án được biên soạn tốt, nhưng các tham chiếu tất cả các sai lầm.