Angular internationlization (i18n) seems to be not working

3.6k views Asked by At

I want to translate english to marathi language (Indian regional language - mr_IN). I have followed all the instructions for translation at https://angular.io/guide/i18n . Made sure all the dependencies are there however, no translation is done though app compiles successfully. Below are the details to help understand more.

Paragraph to translate:

 <p i18n="@@intro_p1">Text to translate.</p>

./locale/messages.mr_IN.xlf

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="intro_p1" datatype="html">
        <source>Text to translate.</source>
        <target state="new">टेक्स्ट चे भाषांतर.</target>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/home/home.component.ts</context>
          <context context-type="linenumber">8</context>
        </context-group>
      </trans-unit>
    </body>
  </file>
</xliff>

main.ts

import './polyfills.ts';
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { getTranslationProviders } from './app/i18n-providers';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

getTranslationProviders().then(providers => {
  const options = { providers };
  platformBrowserDynamic().bootstrapModule(AppModule, options);
});

script in index.html

<script>
      // Get the locale id somehow
      document.locale = 'mr_IN';
      // Map to the text plugin
      System.config({
        map: {
          text: 'systemjs-text-plugin.js'
        }
      });
      // Launch the app
      System.import('main.js').catch(function(err){ console.error(err); });
</script>

What is the problem here? Can anybody figure out please?

Thanks.

1

There are 1 answers

0
tyro On
ng serve --aot \
           --i18n-file=src/i18n/messages.es.xlf \
           --locale=es \
           --i18n-format=xlf

This is the command to start angular app with translation which I was unaware of.