i18n using AOT in Angular 4

Question

We have a requirement and asked to use Angular 4 and I am working on implementing internationalization. Since I am new to angular I was going through i18n and found that i18n with AOT currently supports only the translation in template. What does it mean when they say the support is only in the template, can anybody explain with some example.

Are there any good examples to implement i18n and also to render based on browser locale.

Answer 1

It means that you cannot translate text from within your TypeScript code; only static HTML content can be translated.

Can be translated

<p i18n>Text in a paragraph</p>
        ^^^^^^^^^^^^^^^^^^
<my-component title="My Title" i18n-title></my-component>
                     ^^^^^^^

Cannot be translated

if (hasError) {
  showErrorMessage('An error has occured');
                   ^^^^^^^^^^^^^^^^^^^^^^
}

If you want to translate message from within your code, you have to either implement some kind of I18nService yourself, or use one of the alternative libraries like ngx-translate

For more in-depth information, just stick to the official docs.