没有在注入错误和没有提供者错误时提供服务的提供者

Question

error message I am the new man to angular 2. I am getting No provider for service at injection error and no provider error even i specified the provider in the app module. The code is 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 { }

My file heirarachy is : c:/User/Desktop/projectname/src/app/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';  
 }

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

try giving the provider service name at the component level like belo

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