title: Angular 4 no Provider for Service
body: <p>I am trying to create an angular app, and trying to use a service in a component,</p>
  
  <p><strong>My Service :DetailsTabAPiService</strong> </p>
  
  <pre><code>@Injectable()
  export class DetailsTabAPiService {
  
      constructor(private _http: Http) { }
  
      private _url: string = AppSettings.URI + "/api/maintenance/Countries";
  
      fetchCountry(): Observable&lt;ICountries&gt; {
          console.log('contry 3');
  
          return this._http.get(this._url)
              .map((resp: Response) =&gt; resp.json())
              .catch(this.handleErrors);
      }
  
  
      handleErrors(error: any, caught: Observable&lt;any[]&gt;): Observable&lt;ICountries[]&gt; {
          console.error(error);
          return Observable.throw(error.json().error || 'Server error') as Observable&lt;ICountries[]&gt;;
      }
  
  }
  </code></pre>
  
  <p><strong>My Controller : DetailTabsComponent</strong></p>
  
  <pre><code>import { MaintPlantApiService } from '../../services/plants-api.service';
  import { MaintProgramApiService } from '../../services/programs-api.service';
  import { DetailsTabAPiService } from '../../services/detailstab-api.service';
  import { IPlants } from '../../models/plants.model';
  import { ICountries } from '../../models/Countries.model';
  @Component({
      selector: 'ppa-detailtabs',
      templateUrl: './detailtabs.Component.html',
      providers: [MaintProgramApiService, MaintPlantApiService, DetailsTabAPiService],
      styleUrls: ['./tabs.css'],
  
  })
  
  export class DetailTabsComponent {
  
      @Input() myplantid: number = 0;
      plant: IPlants;
      country: ICountries;
      isSuccess: boolean = false;
      _plantId: number = 0;
      public allowCustom: boolean = true;
      public allCountries = [];
      constructor(private zone: NgZone, private _router: Router, private DetailsApiServ: DetailsTabAPiService, private ProgramsApiSvrc: MaintProgramApiService,
          private plantApiSrv: MaintPlantApiService, private activatedRoute: ActivatedRoute) {
  
      }
  
      ngOnInit() {
          console.log('contry 1');
          this.fetchCountryList();
  
          this.activatedRoute.params.subscribe((params: Params) =&gt; {
              //alert('params received: ' + params['Id']);
              let plantId = params['Id'];
              this.plantApiSrv.getDataById(plantId)
                  .subscribe((callbackData) =&gt; {
                      this.plant = callbackData;
                  });
          });
  
      }
      ModifyPlantDetails(_data: IPlants): void {
  
          this.plantApiSrv.update(_data.Id, _data)
              //.subscribe(result =&gt; this.plant = result, error =&gt; this.isSuccess = false);
              .subscribe(result =&gt; {
              this.plant = result; this.isSuccess = true;
              },
              error =&gt; { this.isSuccess = false });   
  
      }
  
  
      fetchCountryList(): void {
          console.log('contry 2');
  
          this.DetailsApiServ.fetchCountry()
              .subscribe(result =&gt; {
                  this.country = result;
                  console.log(this.country);
              },
              error =&gt; { this.isSuccess = false });  
      }
  }
  
  As per the documentation, I am supped to put the service on the provider list, which I have done, but still while using it gives me the error. 
  </code></pre>
  
  <p>I am supposed to get a list of countries from the service. So I have imported the service, then put in the constructor, and then trying to use it.</p>
  
  <blockquote>
    <p>But despite doing everything according to the documentation, it's
    giving me the error "no Provider for Service" even though I am
    included the service in my providers.</p>
  </blockquote>
  
  <p>As per my understanding, these should be the steps to get this thing working. But somehow it's not working. Please help. I am sure I am missing something here. But I am not sure What.</p>