core
core copied to clipboard
NullInjectorError: No provider for TranslateLoader!
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.
- 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",
- 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:
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"