title: Angular: Localization in to multiple languages
body: <p>I have an Angular 6 application that has already been built. Now we are planning to support it in to multiple languages. I am able to create multiple xlf files and get the target strings replaced with the language. My locale file has three files like messages.en.xlf, messages.es.xlf and messages.fr.xlf each for English, Spanish and French.</p>
  
  <p>Based on the language of the browser, the app should pick up the required language file. If the browser is set in French, it should automatically pickup messages.fr.xlf and display the app in French. </p>
  
  <p>Initially my build command will be <code>ng build --prod --output-hashing all</code>, but with the localization changes, I need to use <code>--aot=false</code> and <code>--build-optimizer=false</code> and my app's performance and load time became worse. </p>
  
  <pre><code>ng build  --prod --output-hashing all --aot=false --build-optimizer=false
  </code></pre>
  
  <p>My main.ts file is like below:</p>
  
  <pre class="lang-js prettyprint-override"><code>declare const require;
  var userLang;
  
  window.addEventListener('languagechange', function () {
    // callLangugae();
    location.reload(true);
  });
  
  function callLangugae() {
    userLang = navigator.language;
    userLang = userLang.split("-")[0];
    switch (userLang) {
      case 'es': {
        registerLocaleData(localeEs);
        break;
      }
      case 'fr': {
        registerLocaleData(localeFr);
        break;
      }
      case 'en': {
        registerLocaleData(localeEn);
        break;
      }
      default: {
        userLang = 'en';
        registerLocaleData(localeEn);
        break;
      }
    }
  
  }
  
  callLangugae();
  
  const translations = require(`raw-loader!./locale/messages.${userLang}.xlf`);
  
  platformBrowserDynamic().bootstrapModule(AppModule, {
    providers: [
      { provide: TRANSLATIONS, useValue: translations },
      { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' }
    ]
  })
    .catch(err =&gt; console.log(err));
  </code></pre>
  
  <p>I am wondering is there a proper way to load the xlf file based on the language of the browser without the performance problems and without making AOT false. </p>