Angular: Localization in to multiple languages

I have an angular6 application that is already 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.

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.

Initially my build command will be ng build --prod --output-hashing all, but with the localization changes, I need to use --aot=false and build optimizer false and my app's performance and load time became worse.

"ng build --prod --output-hashing all --aot=false --build-optimizer=false

My main.ts file is like below

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 => console.log(err));

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 with out making aot false.

from Angular: Localization in to multiple languages