no provider for service when it actually exists in providers

I have this service in which I'm calling my another service

import { Injectable, Inject } from '@angular/core';

import { HttpCall } from './httpcall.service';

@Injectable()
export class SearchService {

    constructor( @Inject(HttpCall) private httpCall: HttpCall) { }
}

in my component I have

providers: [ HttpCall, LanguageServiceService, CookiesService, SearchService]

But when I run app it throws an errors:

EXCEPTION: Error in ./LayoutComponent class LayoutComponent_Host - inline template:0:0 caused by: No provider for HttpCall!

What's wrong?

When I add provider in ngmodule it anyway throws that error

my app.module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
***

import { HttpCall } from './Service/httpcall.service';
import { SearchService } from './Service/search.service';

***

@NgModule({
    declarations: [
        LayoutComponent,
        HomeComponent,
       ***
    ],
    imports: [
        BrowserModule,
        ChartModule,
        FormsModule,
        ReactiveFormsModule,
        HttpModule,
        TranslateModule.forRoot(),
        appRouting,
        DatePickerModule,
        BusyModule,
        SelectModule
    ],
    providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }, HttpCall, SearchService],
    bootstrap: [LayoutComponent]
})
export class AppModule { }

LayoutComponent:

import { Component, OnInit, Input } from '@angular/core';
import { LanguageServiceService } from '../../Service/language-service.service';
import { CookiesService } from '../../Service/cookies.service';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { Search } from './search';
import { HttpCall } from '../../Service/httpcall.service';
import { Router } from '@angular/router';

import { SearchService } from '../../service/search.service';

@Component({
    selector: 'app-layout',
    templateUrl: './layout.component.html',
    styleUrls: ['./layout.component.css'],
    providers: [LanguageServiceService, CookiesService]
})


export class LayoutComponent implements OnInit {
    searchval: FormGroup;
    searchModel: Search;


    constructor(public ls: LanguageServiceService, public httpCall: HttpCall,
        public router: Router, private sharedResource: SearchService) {

    }

and my child component:

import { Component, OnInit } from '@angular/core';
import { HttpCall } from '../../Service/httpCall.Service';
import { LanguageServiceService } from './../../Service/language-service.service';
import { Router } from '@angular/router';
import { Reports } from './Reports';

@Component({
    selector: 'app-reports',
    templateUrl: './reports.component.html',
    styleUrls: ['./reports.component.css'],
    providers: [LanguageServiceService]
})
export class ReportsComponent implements OnInit {
    busy: any;
    reports: Reports[];

    constructor(private httpCall: HttpCall, public languageService: LanguageServiceService, public router: Router) { }
}

Solution

I experienced similar issue. For me it was caused by injecting a service not provided in root to a resolver which was provided in root.

// resolver
@Injectable({ providedIn: 'root' }) // remove providedIn and add to module's providers instead
export class SomeResolver implements
Resolve<any> { constructor(service: SomeService) { ... } }

// service
@Injectable()
export class SomeService {}

// module
@NgModule({
    providers: [SomeService] // this won't provide service in root injectables
})
export class SomeModule {}