Core: No provider for HttpClient

[madoublet]

I'm submitting a ... (check one with "x")

[ ] bug report => check the FAQ and search github for a similar issue or PR before submitting
[x] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

Current behavior
After adding the loader, the AngularCLI compiles the code without issue, however, the browser throws an error "No provider for HttpClient". See the loader code below. This is from the Plunker example.

TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        })

If I add HttpClient to the providers array in app.module.ts, the browser throws an error "No provider for HttpHandler". Adding HttpHandler to the providers array in app.module.ts will result in a compilation error "Property 'provide' is missing in type 'typeof HttpHandler'".

I feel as if I have took a wrong turn somewhere else as none of this happens in the plunker example. You can see the module and component here:
https://github.com/madoublet/respond-ui/blob/master/src/app.module.ts
https://github.com/madoublet/respond-ui/blob/master/src/app.component.ts

Without adding the loader, I don't have any errors and the app works without issue. It of course does not perform any translations.

Expected/desired behavior
Loads the translations from the assets directory.

Reproduction of the problem
I can only seem to produce this in my own project. Plunkr works fine.

Please tell us about your environment:

• Mac OSX
• Angular CLI
• Angular 4.0
• ngx-translate/core 7.10
• ngx-translate/http-loader 1.0.1

• ngx-translate version: 1.0.1

• Angular version: 4.0

• Browser: [Chrome 60]

Thanks in advance for your help, Matt

[SamVerschueren]

Add HttpClientModule to your imports.

import { HttpClientModule, HttpClient } from '@angular/common/http';

@NgModule({
    imports: [
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        })
    ]
})

[madoublet]

Thank you! This worked perfectly.

[pranaysand]

I had the same issue even after importing all the libraries. this is what fixed mine.
In you app.module.ts file you have to mention the service name you have created.
providers: [
servicename
]