Différences

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

--- lang:angular:traduction [2021/10/09 22:43] – [Sources] : ajout d'une source simple pour ngx-translate root
+++ lang:angular:traduction [2021/10/10 18:49] (Version actuelle) – [Sources] : ajout du lazy load pour ngx-translate root
@@ Ligne 272: / 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 375: / Ligne 395: @@
 ====Présentation====
-[[|Site web]]
+[[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]].
+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>
-Ces données viennent en doublon avec le pipe "nombre" de ''@ngx-translate'' mais il faudra l'accepter.
+[[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.