NullInjectorError: No provider for TranslateLoader!

[tungnt-vn]

Current behavior

I get the error while setting Translation module for Angular 15. ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[TranslateService -> TranslateLoader -> TranslateLoader -> TranslateLoader]: NullInjectorError: No provider for TranslateLoader!

Expected behavior

How do you think that we should fix this?

Minimal reproduction of the problem with instructions

I did following guide step by step.

1. install ngx-translate/core and ngx-translate/http-loader. Here is my package.json "dependencies": { "@angular/animations": "^15.1.0", "@angular/common": "^15.1.0", "@angular/compiler": "^15.1.0", "@angular/core": "^15.1.0", "@angular/forms": "^15.1.0", "@angular/platform-browser": "^15.1.0", "@angular/platform-browser-dynamic": "^15.1.0", "@angular/router": "^15.1.0", "@ngx-translate/core": "^14.0.0", "@ngx-translate/http-loader": "^7.0.0",
2. import TranslationModule.forRoot in the app.module.ts as below code:

`import { TranslateHttpLoader } from '@ngx-translate/http-loader'; import { HttpClient, HttpClientModule } from '@angular/common/http';

export function HttpLoaderFactory(http: HttpClient) { return new TranslateHttpLoader(http); }

@NgModule({ declarations: [ AppComponent, ], imports: [ CoreModule, HttpClientModule, BrowserModule, FormsModule, ReactiveFormsModule, BrowserAnimationsModule, ToastrModule.forRoot(), TranslateModule.forRoot({ defaultLanguage: 'en', loader: { provide: TranslateHttpLoader, useFactory: HttpLoaderFactory, deps: [HttpClient] } }), ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }` 3. Build and run the application by npm start

Environment

"@angular/animations": "^15.1.0",
    "@angular/common": "^15.1.0",
    "@angular/compiler": "^15.1.0",
    "@angular/core": "^15.1.0",
    "@angular/forms": "^15.1.0",
    "@angular/platform-browser": "^15.1.0",
    "@angular/platform-browser-dynamic": "^15.1.0",
    "@angular/router": "^15.1.0",
    "@ngx-translate/core": "^14.0.0",
    "@ngx-translate/http-loader": "^7.0.0",

Browser:
- [ ] Chrome (desktop) version 111.0
 
For Tooling issues:
- Node version: v16.17.1
- Platform:  Windows 10 Home 

Others:

[Khalil-Khaled]

Hi tungnt-vn, I had the same issue as you, having migrated an angular 11 project to an angular 14 template. The fix for me was to add TranslateService and TranslateStore to the providers list of my module like this :

providers:[TranslateService, TranslateStore]

These are my new dependencies for angular and ngx translate :

"@angular/animations": "^14.0.2", "@angular/cdk": "^14.0.2", "@angular/common": "^14.0.2", "@angular/compiler": "^14.0.2", "@angular/core": "^14.0.2", "@angular/forms": "^14.0.2", "@angular/localize": "^14.0.2", "@angular/material": "^14.2.7", "@angular/material-moment-adapter": "^14.2.7", "@angular/platform-browser": "^14.0.2", "@angular/platform-browser-dynamic": "^14.0.2", "@angular/platform-server": "^14.0.2", "@angular/router": "^14.0.2", "@ngx-translate/core": "^14.0.0", "@ngx-translate/http-loader": "^7.0.0"