Блог

Я попытался добавить механизм перевода в свое веб-приложение, но загружен только файл en.json. fr.json нет.

1 — Я установил

 "@ngx-translate/core": "^13.0.0",
"@ngx-translate/http-loader": "^6.0.0",
 

2 — Я настраиваю приложение.модуль с HttpClientModule и TranslateModule

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

    HighlightModule,
    ClipboardModule,
    AppRoutingModule,
    InlineSVGModule.forRoot(),
    NgbModule,
  ],
  providers: [
    CookieService,
    {
      provide: APP_INITIALIZER,
      useFactory: appInitializer,
      multi: true,
      deps: [AuthService],
    },
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: {
        coreLibraryLoader: () => import('highlight.js/lib/core'),
        languages: {
          xml: () => import('highlight.js/lib/languages/xml'),
          typescript: () => import('highlight.js/lib/languages/typescript'),
          scss: () => import('highlight.js/lib/languages/scss'),
          json: () => import('highlight.js/lib/languages/json')
        },
      },
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

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

3 — Я настраиваю перевод в нижнем колонтитуле

   languageList: object[] = [{ name: 'French' , code: 'fr'}, { name: 'English', code: 'en'}];

  constructor(private layout: LayoutService,
              public translateService: TranslateService) {

    // translation initialisation
    translateService.addLangs(['en', 'fr']);
    translateService.setDefaultLang('fr');

    let browserLang = translateService.getBrowserLang();

    if (localStorage.getItem('lang')) {
      browserLang = localStorage.getItem('lang');
    }
    translateService.use(browserLang.match(/en|fr/) ? browserLang : 'en');
  }
 

И в html-файле

 <select class='select-option language-btn language-change-select' #languageSelected  (change)='selectLanguage(languageSelected.value)'>
      <option class='option'
              *ngFor='let language of languageList'
              [value]="language.code">{{ language.name }}</option>
</select>
 

For English, it works well, but when i select French the file is not loaded.
My en.json

 {
  "footer":{
    "language":"Language",
    "change-language":"Change language"
  },

  "header":{

  },
  "home":{
  },
  "menu": {
    "home": "Home",
    "apps": "Apps",
    "games": "Games",
    "ebooks": "Ebooks"
  },
  "creators":{

  }
}
 

and the fr.json file

 {
  "footer":{
    "language":"Langue",
    "change-language":"Changer de langue"
  },

  "header":{

  },
  "home":{
  },
  "menu": {
    "home": "Accueil",
    "apps": "Applis",
    "games": "Jeux",
    "ebooks": "Livres"
  },
  "creators":{

  }
}
 

Пожалуйста, вы знаете, что случилось не так ?