0

In my development environment, the code works fine. But as soon as I build it and push to production, it's failing to compile the app into the correct language

console.log(environment);

if (environment.production) {
   enableProdMode();
   window.console.log = function () { };   // disable any console.log debugging statements in production mode
}


declare const require;
var translations;

let locationSplit = window.location.hostname.split(".");
console.log(locationSplit);

if (locationSplit[0] == environment.chinese) {

  translations = require(`raw-loader!./locale/translatedChinese.zh-Hans.xlf`);
}
else {

  translations = null;
}


platformBrowserDynamic().bootstrapModule(AppModule, {
  providers: [
    { provide: TRANSLATIONS, useValue: translations },
    { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' }
  ]
});

I'm console logging the translation file and it's there. But...it's not doing it. Yes, the logic is fine. I've tested it. And like I said, when running locally with webpack, all is well. So I'm confused on what the issue could be. The file is there, the logic is correct, but it still shows up in english :(

cphilpot
  • 1,155
  • 3
  • 17
  • 39

2 Answers2

4

angular i18n doesn't work with aot. try to build like this make sure to turn aot off:

 ng build --aot=false
Fateh Mohamed
  • 20,445
  • 5
  • 43
  • 52
  • 1
    I had strange behavior, for me, this was the exact opposite. Without AOT, i18n is not working, when AOT is set to true all is working. – bAN Jan 10 '20 at 10:49
0

It seems that is possible doing it with the AOT compiler.

From Angular documentation:

When you internationalize with the AOT compiler, you must pre-build a separate application package for each language and serve the appropriate package based on either server-side language detection or url parameters. To instruct the AOT compiler to use your translation configuration, set the three "i18n" build configuration options in your angular.json file.

  1. i18nFile: the path to the translation file.
  2. i18nFormat: the format of the translation file.
  3. i18nLocale: the locale id.

You should also direct the output to a locale-specific folder to keep it separate from other locale versions of your app, by setting the outputPath configuration option.

"build": {
  ...
  "configurations": {
    ...
    "fr": {
      "aot": true,
      "outputPath": "dist/my-project-fr/",
      "i18nFile": "src/locale/messages.fr.xlf",
      "i18nFormat": "xlf",
      "i18nLocale": "fr",
      ...
    }
  }
},
"serve": {
  ...
  "configurations": {
    ...
    "fr": {
      "browserTarget": "*project-name*:build:fr"
    }
  }
}

You can then pass this configuration to the ng serve or ng build commands. The example below shows how to serve the French language file created in previous sections of this guide:

ng serve --configuration=fr

For production builds, you define a separate production-fr build configuration in the CLI configuration file, angular.json.

...
"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": { ... },
    "configurations": {
      "fr": {
        "aot": true,
        "outputPath": "dist/my-project-fr/",
        "i18nFile": "src/locale/messages.fr.xlf",
        "i18nFormat": "xlf",
        "i18nLocale": "fr",
        "i18nMissingTranslation": "error",
      }
// ...
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "my-project:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "my-project:build:production"
    },
    "fr": {
      "browserTarget": "my-project:build:fr"
    }
  }
},

The same configuration options can also be provided through the CLI with your existing production configuration.

ng build --prod --i18n-file src/locale/messages.fr.xlf --i18n-format xlf --i18n-locale fr

More info here: https://angular.io/guide/i18n#merge-with-the-aot-compiler

grínxols
  • 11
  • 2
  • Whilst links are encouraged on SO, we discourage using link-only answers as they are rendered useless when the link expires. Please update your answer to include more information – I.T Delinquent Jul 11 '19 at 09:22