Outils pour utilisateurs

Outils du site


lang:angular:traduction

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision
Révision précédente
lang:angular:traduction [2021/08/23 23:38] – Mise à jour de "@angular/localize" rootlang:angular:traduction [2021/10/10 18:49] (Version actuelle) – [Sources] : ajout du lazy load pour ngx-translate root
Ligne 8: Ligne 8:
  
   * Pas de dépendances externes,   * Pas de dépendances externes,
-  * Le texte est traduit en dur dans le code généré,+  * Le texte est traduit en dur dans le code généré, pas de pipe,
   * On compile une fois mais on génère un site par langue.   * On compile une fois mais on génère un site par langue.
 +
  
 Inconvénient : Inconvénient :
Ligne 16: Ligne 17:
   * On génère un site par langue. Cela duplique les ''assets''. [[https://angular.io/guide/i18n|Localizing your app]] {{ :lang:angular:traduction:angular_-_localizing_your_app_2021-08-22_00_24_04_.html |Archive du 12.2.3 le 22/08/2021}}   * On génère un site par langue. Cela duplique les ''assets''. [[https://angular.io/guide/i18n|Localizing your app]] {{ :lang:angular:traduction:angular_-_localizing_your_app_2021-08-22_00_24_04_.html |Archive du 12.2.3 le 22/08/2021}}
   * Il n'est que possible de générer la liste des textes à traduire. Il n'est pas possible de mettre à jour une liste des traductions. [[https://github.com/angular/angular-cli/issues/6552|ng-xi18n: Merge/Update Existing Translations File (XLIFF)]] {{ :lang:angular:traduction:ng-xi18n_merge_update_existing_translations_file_xliff_issue_6552_angular_angular-cli_github_2021-08-22_00_29_07_.html |Archive du 02/06/2017 le 23/08/2021}}   * Il n'est que possible de générer la liste des textes à traduire. Il n'est pas possible de mettre à jour une liste des traductions. [[https://github.com/angular/angular-cli/issues/6552|ng-xi18n: Merge/Update Existing Translations File (XLIFF)]] {{ :lang:angular:traduction:ng-xi18n_merge_update_existing_translations_file_xliff_issue_6552_angular_angular-cli_github_2021-08-22_00_29_07_.html |Archive du 02/06/2017 le 23/08/2021}}
 +  * Il n'est pas possible de changer la langue sans changer de page HTML,
  
 ====Initialisation==== ====Initialisation====
Ligne 134: Ligne 136:
 </code> </code>
 =====@ngx-translate/core===== =====@ngx-translate/core=====
 +
 +[[https://github.com/ngx-translate/core|Site web]]
  
 ====Présentation==== ====Présentation====
  
-L'inverse de ''@angular/localize''.+L'inverse de ''@angular/localize''C'est donc une dépendance externe à Angular. 
 + 
 +Avantages : 
 + 
 +  * Un seul site dont la langue est changeable sans recharger, 
 +  * On peut avoir un fichier de traduction distinct par librairie et par application [[https://github.com/ngx-translate/core/issues/199#issuecomment-339084987|Loading Multiple file from a directory]] {{ :lang:angular:traduction:loading_multiple_file_from_a_directory._issue_199_ngx-translate_core_github_2021-08-24_20_45_19_.html |Archive du 16/08/2016 le 24/08/2021}} 
 + 
 +Inconvénient : 
 + 
 +  * Comme c'est une dépendance externe, on ne profite pas d'une intégration profonde des avantages du compilateur, 
 +  * Dépendance externe, 
 +  * Le texte est traduit à la volée. Avant la conversion, le texte est manquant. Cela peut donc réduire l'expérience utilisateur, 
 +  * Nécessite de définir l'utilisation d'un pipe pour chaque composant. 
 + 
 +====Initialisation==== 
 + 
 +===Installation=== 
 + 
 +<code bash> 
 +npm i --save @ngx-translate/core 
 +</code> 
 + 
 +===Configuration=== 
 + 
 +Il n'y a besoin de rien. 
 + 
 +===Sources=== 
 + 
 +Un exemple simple : [[https://blog.angulartraining.com/how-to-internationalize-i18n-your-angular-application-tutorial-dee2c6984bc1|How to internationalize (i18n) your Angular application?]] {{ :lang:angular:traduction:how_to_internationalize_i18n_your_angular_application_tutorial_by_alain_chautard_angular_training_2021-10-09_22_38_52_.html |Archive du 02/04/2019 le 09/10/2021}} 
 + 
 +Un autre exemple plus complet avec uniquement une application: [[https://blog.briebug.com/blog/internationalizing-your-angular-app|Internationalizing your Angular app]] {{ :lang:angular:traduction:internationalizing_your_angular_app_2021-10-02_09_46_07_.html |Archive du 20/08/2019 le 02/10/2021}} 
 + 
 +Exemple bien détaillé avec une librairie et une application: [[https://medium.com/@lopesgon/translate-angular-4-with-ngx-translate-and-multiple-modules-7d9f0252f139|Translate Angular >=4 with ngx-translate and multiple modules]] {{ :lang:angular:traduction:translate_angular_4_with_ngx-translate_and_multiple_modules_by_frederic_lopes_medium_2021-08-24_20_55_45_.html |Archive du 09/08/2017 le 24/08/2021}} 
 + 
 +  * Librairie 
 + 
 +Il faut exporter le module de traduction. [[https://github.com/ngx-translate/core/blob/master/README.md#sharedmodule|@ngx-translate/core - SharedModule]] {{ :lang:angular:traduction:core_readme.md_at_master_ngx-translate_core_github_2021-08-24_23_54_17_.html |Archive du 28/05/2021 le 24/08/2021}} 
 + 
 +<file javascript lib-jessica/src/lib/lib-jessica.module.ts> 
 +import { TranslateModule } from '@ngx-translate/core'; 
 + 
 +@NgModule({ 
 +  imports: [..., TranslateModule], 
 +  exports: [ 
 +    ..., 
 +    TranslateModule 
 +  ] 
 +}) 
 +</file> 
 + 
 +  * Application 
 + 
 +<file javascript app-main/src/app/app.component.spec.ts> 
 +import { TranslateService } from '@ngx-translate/core'; 
 + 
 +export class AppComponent { 
 +  ... 
 + 
 +  constructor(public translate: TranslateService) { 
 +    translate.addLangs(['en', 'fr']); 
 +    translate.setDefaultLang('en'); 
 +  } 
 +
 + 
 +</file> 
 + 
 +<file javascript app-main/src/app/util/translate/multi-translate-http-loader.ts> 
 +import { HttpClient } from '@angular/common/http'; 
 +import { TranslateLoader } from '@ngx-translate/core'; 
 +import { forkJoin, Observable } from 'rxjs'; 
 +import { map } from 'rxjs/operators'; 
 + 
 +export class MultiTranslateHttpLoader implements TranslateLoader { 
 +  constructor( 
 +    private http: HttpClient, 
 +    public resources: { prefix: string; suffix: string }[] = [ 
 +      { 
 +        prefix: './assets/i18n/', 
 +        suffix: '.json' 
 +      } 
 +    ] 
 +  ) {} 
 + 
 +  public getTranslation(lang: string): Observable<unknown>
 +    return forkJoin( 
 +      this.resources.map((config) => { 
 +        return this.http.get(`${config.prefix}${lang}${config.suffix}`); 
 +      }) 
 +    ).pipe( 
 +      map((response) => { 
 +        return response.reduce((a, b) => { 
 +          return Object.assign(a, b); 
 +        }); 
 +      }) 
 +    ); 
 +  } 
 +
 +</file> 
 + 
 +<file javascript app-main/src/app/app.module.ts> 
 +import { HttpClient, HttpClientModule } from '@angular/common/http'; 
 +import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; 
 + 
 +import { MultiTranslateHttpLoader } from './util/translate/multi-translate-http-loader'; 
 + 
 +export function createTranslateLoader(http: HttpClient): TranslateLoader { 
 +  return new MultiTranslateHttpLoader(http,
 +    { prefix: './assets/i18n/', suffix: '.json' }, 
 +    { prefix: './assets/i18n/library-', suffix: '.json'
 +  ]); 
 +
 + 
 +@NgModule({ 
 +  ..., 
 +  imports: [ 
 +    ..., 
 +    HttpClientModule, 
 +    TranslateModule.forRoot({ 
 +      loader: { 
 +        provide: TranslateLoader, 
 +        useFactory: createTranslateLoader, 
 +        deps: [HttpClient] 
 +      }, 
 +      defaultLanguage: 'en' 
 +    }) 
 +  ], 
 +  ... 
 +}) 
 +... 
 +</file> 
 + 
 +===Lazy load=== 
 + 
 +Pour éviter de devoir charger toutes les langues possibles, il faut charger dynamiquement les locales. 
 + 
 +<code javascript> 
 +import { registerLocaleData } from '@angular/common'; 
 + 
 +const locale = await import( 
 +  /* webpackInclude: /(en|fr)\.js$/ */ 
 +  '@angular/common/locales/' + selectedLang 
 +); 
 +registerLocaleData(locale.default, selectedLang); 
 +translate.use(selectedLang); 
 +</code> 
 + 
 +Ici, translate est ''TranslateService''
 + 
 +L'utilisation de ''webpackInclude'' permet de ne pas charger toutes les langues mais uniquement celles supportées. 
 + 
 +[[https://medium.com/angular-in-depth/dynamic-import-of-locales-in-angular-b994d3c07197|Dynamic Import of Locales in Angular]] {{ :lang:angular:traduction:dynamic_import_of_locales_in_angular_by_michael_karen_angular_in_depth_medium_2021-10-10_18_22_30_.html |Archive du 14/11/2018 le 10/10/2021}} 
 +====Traduction==== 
 + 
 +  * HTML 
 + 
 +<code xml> 
 +{{ 'HOME.TITLE' | translate }} 
 +</code> 
 + 
 +  * Traduction 
 + 
 +<file javascript app-main/src/assets/i18n/en.json> 
 +
 +  "HOME":
 +    "TITLE": "Calculator for Meherhof foundation!" 
 +  } 
 +
 +</file> 
 + 
 +====Tests==== 
 + 
 +[[https://stackoverflow.com/questions/53370590/ngx-translate-how-to-test-components|ngx-translate how to test components]] {{ :lang:angular:traduction:angular_-_ngx-translate_how_to_test_components_-_stack_overflow_2021-08-24_21_09_41_.html |Archive du 09/11/2019 le 24/08/2021}} 
 + 
 +[[https://dev.to/rmuhlfeldner/how-to-fix-ngx-translate-error-when-running-tests-5ado|How to fix ngx-translate error when running tests]] {{ :lang:angular:traduction:how_to_fix_ngx-translate_error_when_running_tests_-_dev_community_2021-08-24_23_50_51_.html |Archive du 02/10/2019 le 24/08/2021}} 
 + 
 +Pour les tests unitaires (pas end-to-end), il n'est généralement pas nécessaire de charger la librairie. Avantage : gain de temps. Inconvénient, l'aspect graphique ne sera pas conforme. 
 + 
 +Dans le composant principal de l'application : 
 + 
 +<file javascript app-main/src/app/app.component.spec.ts> 
 +import { 
 +  TranslateFakeLoader, 
 +  TranslateLoader, 
 +  TranslateModule 
 +} from '@ngx-translate/core'; 
 + 
 +describe('AppComponent', () => { 
 +  beforeEach(async () => { 
 +    await TestBed.configureTestingModule({ 
 +      imports: [ 
 +        ..., 
 +        TranslateModule.forRoot({ 
 +          loader: { 
 +            provide: TranslateLoader, 
 +            useClass: TranslateFakeLoader 
 +          } 
 +        }) 
 +      ], 
 +      ... 
 +</file> 
 + 
 +Dans chaque composant de l'application, on utilise le pipe de traduction de la librairie : 
 + 
 +<file javascript app-main/src/app/ui/main/main.component.spec.ts> 
 +import { TranslateMockPipe } from 'lib-library'; 
 + 
 +describe('MainComponent', () => { 
 +  beforeEach(async () => { 
 +    await TestBed.configureTestingModule({ 
 +      declarations:
 +        ..., 
 +        TranslateMockPipe 
 +      ] 
 +    }).compileComponents(); 
 +  }); 
 +</file> 
 + 
 +Dans chaque composant de la librairie, on utilise le même pipe de traduction : 
 + 
 +<file javascript lib-jessica/src/lib/xxx.component.spec.ts> 
 +import { TranslateMockPipe } from '../../../util/translation/translate-mock.pipe'; 
 + 
 +describe('FoundationStripFormComponent', () => { 
 +  beforeEach(async () => { 
 +    await TestBed.configureTestingModule({ 
 +      ..., 
 +      declarations: [..., TranslateMockPipe] 
 +    }).compileComponents(); 
 +  }); 
 +</file> 
 + 
 +<file javascript lib-library/src/lib/translate-mock.pipe.ts> 
 +import { Pipe, PipeTransform } from '@angular/core'; 
 + 
 +@Pipe({ 
 +  name: 'translate' 
 +}) 
 +export class TranslateMockPipe implements PipeTransform { 
 +  public name = 'translate'; 
 + 
 +  public transform(query: string): string { 
 +    return query; 
 +  } 
 +
 +</file> 
 + 
 +<file javascript projects/lib-jessica/src/public-api.ts> 
 +export * from './lib/util/translation/translate-mock.pipe'; 
 +</file> 
 + 
 +=====globalize.js===== 
 + 
 +====Présentation==== 
 + 
 +[[https://github.com/globalizejs/globalize|Site web]] 
 + 
 +C'est une librairie JavaScript (compatible TypeScript via ''@types'') pour convertir un nombre en texte et un texte en nombre en respectant des locales précises. 
 + 
 +Les données de localisation viennent d'un paquet npm ''cldr-data'' qui utilise les données du consortium [[https://cldr.unicode.org/|Unicode]]. Ces données viennent en doublon avec le pipe "nombre" de ''@ngx-translate'' mais il faudra l'accepter. 
 + 
 +====Utilisation==== 
 + 
 +La librairie est simple à utiliser. 
 + 
 +Ci-dessous, un exemple pour convertir un nombre dans une certaine langue vers une autre langue. 
 + 
 +La particularité ici est l'utilisation du lazy load pour ne charger dynamiquement que les deux langues nécessaire. 
 + 
 +Il est nécessaire d'installer les paquets ''globalize'' et ''@types/globalize''
 + 
 +<file javascript tsconfig.json> 
 +
 +  "compilerOptions":
 +    "paths":
 +      "cldr": ["./projects/app-main/node_modules/cldrjs/dist/cldr"], 
 +      "cldr/*": ["./projects/app-main/node_modules/cldrjs/dist/cldr/*"], 
 +      "globalize/*":
 +        "./projects/app-main/node_modules/globalize/dist/globalize/*" 
 +      ], 
 +      ... 
 +    } 
 +  }, 
 +  ... 
 +
 +</file> 
 + 
 +<code javascript> 
 +import likelySubtags from 'cldr-data/supplemental/likelySubtags.json'; 
 +import numberingSystems from 'cldr-data/supplemental/numberingSystems.json'; 
 + 
 +import * as globalize from 'globalize'; 
 +import 'globalize/number'; 
 + 
 +globalize.load([likelySubtags, numberingSystems]); 
 + 
 +const cldrLocale = await import( 
 +  /* webpackInclude: /main.(en|fr).numbers.json/ */ 
 +  'cldr-data/main/' + selectedLang + '/numbers.json' 
 +); 
 + 
 +globalize.load(cldrLocale.default); 
 + 
 +let parserFrom = globalize.locale(from).numberParser(); 
 +let parserTo = globalize.locale(to).numberFormatter(); 
 +</code> 
 + 
 +[[https://medium.com/@penghuili/how-to-use-globalizejs-4a30d3919c8f|How to use Globalizejs]] {{ :lang:angular:traduction:how_to_use_globalizejs._at_ginmon_our_frontend_supports_3_by_penghui_li_medium_2021-10-10_18_19_28_.html |Archive du 05/04/2019 le 10/10/2021}} 
 + 
 +L'utilisation du commentaire ''webpackInclude'' permet à Angular de n'inclure dans la version finale du site que quelques locales. 
lang/angular/traduction.1629754736.txt.gz · Dernière modification : 2021/08/23 23:38 de root