Every time I attempt to translate Angular components using ngx-translate/core by utilizing the translateService in the constructor, the page appears blank.
This is my appModule :
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './layouts/header/header.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { LandingPageComponent } from './landing-page/landing-page.component';
... more component imports ...
@NgModule({
declarations: [
... list of component declarations ...
],
imports: [
BrowserModule,
AppRoutingModule,
NgbModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: createTranslateLoader,
deps: [HttpClient]
},
defaultLanguage: 'en'
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http,'./assets/i18n/', '.json');
}
This is the landingPage component.ts:
import { Component, OnInit } from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
@Component({
selector: 'app-landing-page',
templateUrl: './landing-page.component.html',
styleUrls: ['./landing-page.component.css']
})
export class LandingPageComponent implements OnInit {
HEADERONE:string = '';
images = true;
isActive:boolean=false;
constructor(public translate: TranslateService) {
translate.setDefaultLang('en');
translate.use('en');
}
I have an en.json file located in assets/i18n :
{
"HEADERONE": "ORIGINAL SPACE PARTS",
"HeaderTwo": "PROFESSIONAL DEVICES’ MAINTAINANCE",
"HeaderThree": "TECHNICAL ACCURACY IN EACH STEP",
... more translations ...
}
Despite everything being correctly set up, I am facing an issue where none of the elements on the landing page are reloading. The cause of this problem remains unknown to me.