在Injection Error處沒有服務提供商，在沒有提供商錯誤

Question

error message我是新的角度2.我沒有提供服務的注入錯誤，沒有提供者錯誤，即使我指定提供商在應用程序模塊。 代碼是 cribs.service.ts

import { Injectable } from '@angular/core'; 
import {Http} from '@angular/http'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class CribsService { 

    constructor(private http: Http) { } 


     getAllCribs() 
     { 
     return this.http.get('data/Cribs.json').map(res => res.json()); 
     } 

    } 

app.module.ts

enter code here 
import { AppComponent } from './app.component'; 
import { CribsListingComponent } from './cribs-listing/cribs- 
listing.component'; 

import { CribCardComponent } from './crib-card/crib-card.component'; 
import {HttpModule} from '@angular/http'; 
import {CribsService} from './service/cribs.service'; 

    @NgModule({ 
    declarations: [ 
    AppComponent, 
    CribsListingComponent, 
    CribCardComponent, 
    ], 
    imports: [ 
     BrowserModule, 
     HttpModule 
     ], 
    providers: [CribsService], 
    bootstrap: [AppComponent] 
    }) 
    export class AppModule { } 

我的文件heirarachy是：c：/用戶/桌面/項目名稱/ src目錄/應用/service/crib.service.ts c：/User/Desktop/projectname/src/app/app.module.ts

app.component.ts

import { Component } from '@angular/core'; 


@Component({ 
selector: 'app-root', 
templateUrl: './app.component.html', 
styleUrls: ['./app.component.css'], 

}) 
export class AppComponent { 
title = 'app works'; 
} 

嬰兒牀，listing.component.ts

import { Component, OnInit } from '@angular/core'; 
import { Http } from '@angular/http'; 
import {CribsService} from './../service/cribs.service'; 
import 'rxjs/add/operator/map'; 

    @Component({ 
    selector: 'app-cribs-listing', 
    templateUrl: './cribs-listing.component.html', 
    styleUrls: ['./cribs-listing.component.css'] 
    }) 

export class CribsListingComponent implements OnInit { 

Cribs: Array<any>; 
error:String; 

constructor(private http:Http, 
private cribsservice: CribsService 
) { } 

ngOnInit() { 

this.cribsservice.getAllCribs() 
.subscribe( 
    data => this.Cribs= data, 
    error => this.error=error.statusText 
); 


} 

} 

Answer 1

嘗試在組件級貝羅一樣給提供服務的名稱

@Component({ 
    selector: 'my-compoment', 
    template: '<h1>{{ title }}</h1>', 
    providers: [CribsService] 
})