i18n

The localization uses the native Angular i18n feature.

The app is written in French and translated into English.

To generate the source file src/locales/messages.fr.json, run the following NPM script npm run extract-i18n.

Note the post-processing script postextract-i18n, which sorts the translations alphabetically.

{
  "scripts": {
    "extract-i18n": "ng extract-i18n --format json --output-path src/locales/ --out-file messages.fr.json",
    "postextract-i18n": "node src/locales/sort-messages-fr-translations.js"
  }
}

The target file src/locales/messages.en.json was created and translated manually.

tip

Don't forget to regenerate the source file every time you add or modify text in the source code. Then update the destination file accordingly.

Be consistent with spaces

When Angular generates the source file, some translations are surrounded by a space.

For example, in the file give-requested-feedback.component.html, the text "Sauvegarder" appears like this...

<button
  type="button"
  [disabled]="submitInProgress"
  mat-stroked-button
  matTooltip="Enregistrer en tant que brouillon"
  i18n-matTooltip="@@Action.SaveAsDraft"
  i18n="@@Action.Save"
  (click)="onDraft()"
>
  Sauvegarder
</button>

...and in the file src/locales/messages.fr.json, the translation appears like this:

{
  "locale": "fr",
  "translations": {
    "Action.Save": " Sauvegarder "
  }
}

warning

You must be consistent when the same text is used several times in the source code and preserve these spaces, otherwise the script npm run extract-i18n will raise warnings.

Running the development server for the en locale

As you probably know, the Angular development server does not support multiple locales (and the language switch button will not work in this environment).

• To run the development server for the fr locale, use the command: npm run start.
• To run the development server for the en locale, use the command: npm run start:en.