Différences

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

--- lang:angular:traduction [2021/10/02 10:01] – [Sources] : ajout d'une source pour ngx-translate root
+++ lang:angular:traduction [2021/10/10 18:49] (Version actuelle) – [Sources] : ajout du lazy load pour ngx-translate root
@@ Ligne 169: / Ligne 169: @@
 ===Sources===
-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}}
+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 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}}
+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
@@ Ligne 270: / Ligne 272: @@
 </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====
@@ Ligne 368: / Ligne 390: @@
 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.