Pubblicato il 09/03/2024 da alnao nella categoria Angular & Ionic

Il framework Angular mette a disposizione una libreria decata alla gestione della internazionalizzazione dei progetti tanto che è stata dedicata una sezione del sito ufficiale. Questa si basa sullo standard i18n che prevede che tutte le lingue vengano rappresentate nel formato {language_id}-{locale_extension} per esempio en-US per l’inclese usato in America, it-IT per l’italiano o fr-CA per il francese usato in Canada. Di default nei progetti Angular viene impostata la lingua en-US. Per attivare la libreria di personalizzazione bisogna aggiungere un pacchetto specifico con il comando

ng add @angular/localize

L’uso base può essere subito notato con le pipe del framework come:

{{ today | date }}
{{ amount | currency : 'en-US' }}

Mentre nei tag è possibile indicare l’uso della liberia con la proprietà i18n dove è necessario impostare un titolo, una descrizione e un nome univoco. Per esempio:

<h1 i18n="Film list|Title for the project@@titleOnPage">Film list</h1>

Successivamente è necessario lanciare il comando

ng extract-i18n

per estrarre il file delle traduzioni messages.xlf in formato xlf anche se è possibile usare altri formati come il json:

ng extract-i18n --format=json

Il file generato è nel formato scelto, dove è possibile inserire dei target per indicare le traduzioni

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="it-IT" datatype="plaintext" original="ng2.template">
<body>
  <trans-unit id="titleOnPage" datatype="html">
    <source>Film list</source>
    <target>Lista dei film</target>
    <context-group purpose="location">
      <context context-type="sourcefile">src/app/app.component.html</context>
      <context context-type="linenumber">4</context>
    </context-group>
    <note priority="1" from="description">Title for the project</note>
    <note priority="1" from="meaning">Film list</note>
  </trans-unit>
</body></file></xliff>

Per la configurazione del progetto è necessario modificare le configurazioni del progetto nel file angular.json aggiungendo tre sezioni

  1. nella sezione dell’applicazioni bisogna aggiungere la definizione della libreria e dei file di tipo xlf
    "i18n": {
      "sourceLocale": "en-US",
      "locales": {
        "it": {
          "translation": "messages.xlf",
          "baseHref": ""
        }
      }
    },
  2. nella sezione “build”, nella sotto sezione “configurations” è necessario definire la compilazione
    "it": {
      "localize": ["it"],
      "outputPath": "dist/under-construction-it/",
      "i18nMissingTranslation": "error"
    }
  3. nella definizione del comando “serve” è necessario aggiungere la sezione
    "it": {
      "browserTarget": "AngularDatasetsFilms:build:it"
    },

Per avviare il progetto oppure per creare la distribuzione si possono utilizzare i comandi standard serve/build con in aggiunta un parametro di configurazione

ng serve --configuration=it
ng build --configuration=it

L’esempio completo di questa tecnica può essere trovata al solito repository

https://github.com/alnao/AngularReactNodeExamples/tree/master/AngularDatasetsFilms
MENU