2

Based on the original documentation here https://angular.io/guide/i18n. src/app/app.component.html will only have english text. messages.fr.xlf is the file that has french text but it's auto generated and not advisable to touch it.

If I want to have app.component.html rendered using french text instead of english, where would I specify french messages "Bonjour" etc. ?

stickler
  • 21
  • 2
  • If using Angular CLI, just restart the server with a command like this ng serve --aot --locale fr Also, [here](https://github.com/angular/angular/tree/master/packages/common/locales) is a link to all the languages Angular supports currently – BSchnitzel May 07 '18 at 18:51

1 Answers1

0

you have to set your default language in your i18n-providers.ts, here is an example if your default language is french (fr), you can give it a default translation file messages.xlf and 

 ./locale/messages.${locale}.xlf

for other languages, and keep in mind that i18n will not work if you build using aot 

  import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID } from '@angular/core';

 export function getTranslationProviders(): Promise<Object[]> {
 let locale = 'fr'; //set it here
 if (localStorage.getItem('Language') !== undefined) {
     locale = localStorage.getItem('Language');
 }

 // return no providers if fail to get translation file for locale
 const noProviders: Object[] = [];

 // No locale or U.S. English: no translation providers
 if (!locale || locale === 'fr') {
     return Promise.resolve(noProviders);
 }

 let translationFile = `./locale/messages.${locale}.xlf`;

 if (locale === 'fr') {
    translationFile = './messages.xlf';
 }

 return loadTranslationFile(translationFile)
    .then( (translations: string ) => [
        { provide: TRANSLATIONS, useValue: translations },
        { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' },
        { provide: LOCALE_ID, useValue: locale }
    ])
    .catch(() => noProviders); // ignore if file not found
 }

 function loadTranslationFile(file) {
  return new Promise(function (resolve, reject) {
    const   xhr: XMLHttpRequest = new XMLHttpRequest();
    xhr.open('GET', file, false);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if (xhr.status === 200 || xhr.status === 0) {
                resolve(xhr.responseText);
            } else {
                reject({
                    status: xhr.status,
                    statusText: xhr.statusText
                });
            }
        } else {
            reject({
                status: xhr.status,
                statusText: xhr.statusText
            });                }
    };
    xhr.onerror = function () {
        reject({
            status: xhr.status,
            statusText: xhr.statusText
        });
    };
    xhr.send(null);
 });
}
Fateh Mohamed
  • 20,445
  • 5
  • 43
  • 52
  • Thanks for the answer. So from what you are saying french texts will need to be maintained in messages.fr.xlf and have it version controlled ? – stickler May 07 '18 at 20:30
  • yes you have to create one file for each language, wen you generate the default file, you can copy and past it and rename it for the second language and change it's content with the needed language, it works perfectly for me – Fateh Mohamed May 07 '18 at 20:35
  • and as i said if you want to deploy your app using aot build, it will not work, check this https://stackoverflow.com/a/49990548/4399281 for more details – Fateh Mohamed May 07 '18 at 20:38