feat(ivy): use i18n locale data to determine the plural form of ICU expressions (#29249)

Plural ICU expressions depend on the locale (different languages have different plural forms). Until now the locale was hard coded as `en-US`.
For compatibility reasons, if you use ivy with AOT and bootstrap your app with `bootstrapModule` then the `LOCALE_ID` token will be set automatically for ivy, which is then used to get the correct plural form.
If you use JIT, you need to define the `LOCALE_ID` provider on the module that you bootstrap.
For `TestBed` you can use either `configureTestingModule` or `overrideProvider` to define that provider.
If you don't use the compat mode and start your app with `renderComponent` you need to call `ɵsetLocaleId` manually to define the `LOCALE_ID` before bootstrap. We expect this to change once we start adding the new i18n APIs, so don't rely on this function (there's a reason why it's a private export).
PR Close #29249

packages/core/src/render3/component.ts

@@ -60,7 +60,7 @@ export interface CreateComponentOptions {
    * Typically, the features in this list are features that cannot be added to the
    * other features list in the component definition because they rely on other factors.
    *
-   * Example: `RootLifecycleHooks` is a function that adds lifecycle hook capabilities
+   * Example: `LifecycleHooksFeature` is a function that adds lifecycle hook capabilities
    * to root components in a tree-shakable way. It cannot be added to the component
    * features list because there's no way of knowing when the component will be used as
    * a root component.

packages/core/src/render3/definition.ts

@@ -17,7 +17,7 @@ import {noSideEffects} from '../util/closure';
 import {stringify} from '../util/stringify';
 
 import {EMPTY_ARRAY, EMPTY_OBJ} from './empty';
-import {NG_COMPONENT_DEF, NG_DIRECTIVE_DEF, NG_MODULE_DEF, NG_PIPE_DEF} from './fields';
+import {NG_COMPONENT_DEF, NG_DIRECTIVE_DEF, NG_LOCALE_ID_DEF, NG_MODULE_DEF, NG_PIPE_DEF} from './fields';
 import {ComponentDef, ComponentDefFeature, ComponentTemplate, ComponentType, ContentQueriesFunction, DirectiveDef, DirectiveDefFeature, DirectiveType, DirectiveTypesOrFactory, FactoryFn, HostBindingsFunction, PipeDef, PipeType, PipeTypesOrFactory, ViewQueriesFunction, ɵɵBaseDef} from './interfaces/definition';
 // while SelectorFlags is unused here, it's required so that types don't get resolved lazily
 // see: https://github.com/Microsoft/web-build-tools/issues/1050
@@ -738,3 +738,7 @@ export function getNgModuleDef<T>(type: any, throwNotFound?: boolean): NgModuleD
   }
   return ngModuleDef;
 }
+
+export function getNgLocaleIdDef(type: any): string|null {
+  return (type as any)[NG_LOCALE_ID_DEF] || null;
+}

packages/core/src/render3/fields.ts

@@ -12,6 +12,7 @@ export const NG_COMPONENT_DEF = getClosureSafeProperty({ngComponentDef: getClosu
 export const NG_DIRECTIVE_DEF = getClosureSafeProperty({ngDirectiveDef: getClosureSafeProperty});
 export const NG_PIPE_DEF = getClosureSafeProperty({ngPipeDef: getClosureSafeProperty});
 export const NG_MODULE_DEF = getClosureSafeProperty({ngModuleDef: getClosureSafeProperty});
+export const NG_LOCALE_ID_DEF = getClosureSafeProperty({ngLocaleIdDef: getClosureSafeProperty});
 export const NG_BASE_DEF = getClosureSafeProperty({ngBaseDef: getClosureSafeProperty});
 
 /**

packages/core/src/render3/i18n.ts

@@ -7,13 +7,12 @@
  */
 
 import '../util/ng_i18n_closure_mode';
-
+import {getPluralCase} from '../i18n/localization';
 import {SRCSET_ATTRS, URI_ATTRS, VALID_ATTRS, VALID_ELEMENTS, getTemplateContent} from '../sanitization/html_sanitizer';
 import {InertBodyHelper} from '../sanitization/inert_body';
 import {_sanitizeUrl, sanitizeSrcset} from '../sanitization/url_sanitizer';
 import {addAllToArray} from '../util/array_utils';
 import {assertDefined, assertEqual, assertGreaterThan} from '../util/assert';
-
 import {attachPatchData} from './context_discovery';
 import {attachI18nOpCodesDebug} from './debug';
 import {ɵɵelementAttribute, ɵɵload, ɵɵtextBinding} from './instructions/all';
@@ -1026,351 +1025,6 @@ export function ɵɵi18nApply(index: number) {
   }
 }
 
-enum Plural {
-  Zero = 0,
-  One = 1,
-  Two = 2,
-  Few = 3,
-  Many = 4,
-  Other = 5,
-}
-
-/**
- * Returns the plural case based on the locale.
- * This is a copy of the deprecated function that we used in Angular v4.
- * // TODO(ocombe): remove this once we can the real getPluralCase function
- *
- * @deprecated from v5 the plural case function is in locale data files common/locales/*.ts
- */
-function getPluralCase(locale: string, nLike: number | string): Plural {
-  if (typeof nLike === 'string') {
-    nLike = parseInt(<string>nLike, 10);
-  }
-  const n: number = nLike as number;
-  const nDecimal = n.toString().replace(/^[^.]*\.?/, '');
-  const i = Math.floor(Math.abs(n));
-  const v = nDecimal.length;
-  const f = parseInt(nDecimal, 10);
-  const t = parseInt(n.toString().replace(/^[^.]*\.?|0+$/g, ''), 10) || 0;
-
-  const lang = locale.split('-')[0].toLowerCase();
-
-  switch (lang) {
-    case 'af':
-    case 'asa':
-    case 'az':
-    case 'bem':
-    case 'bez':
-    case 'bg':
-    case 'brx':
-    case 'ce':
-    case 'cgg':
-    case 'chr':
-    case 'ckb':
-    case 'ee':
-    case 'el':
-    case 'eo':
-    case 'es':
-    case 'eu':
-    case 'fo':
-    case 'fur':
-    case 'gsw':
-    case 'ha':
-    case 'haw':
-    case 'hu':
-    case 'jgo':
-    case 'jmc':
-    case 'ka':
-    case 'kk':
-    case 'kkj':
-    case 'kl':
-    case 'ks':
-    case 'ksb':
-    case 'ky':
-    case 'lb':
-    case 'lg':
-    case 'mas':
-    case 'mgo':
-    case 'ml':
-    case 'mn':
-    case 'nb':
-    case 'nd':
-    case 'ne':
-    case 'nn':
-    case 'nnh':
-    case 'nyn':
-    case 'om':
-    case 'or':
-    case 'os':
-    case 'ps':
-    case 'rm':
-    case 'rof':
-    case 'rwk':
-    case 'saq':
-    case 'seh':
-    case 'sn':
-    case 'so':
-    case 'sq':
-    case 'ta':
-    case 'te':
-    case 'teo':
-    case 'tk':
-    case 'tr':
-    case 'ug':
-    case 'uz':
-    case 'vo':
-    case 'vun':
-    case 'wae':
-    case 'xog':
-      if (n === 1) return Plural.One;
-      return Plural.Other;
-    case 'ak':
-    case 'ln':
-    case 'mg':
-    case 'pa':
-    case 'ti':
-      if (n === Math.floor(n) && n >= 0 && n <= 1) return Plural.One;
-      return Plural.Other;
-    case 'am':
-    case 'as':
-    case 'bn':
-    case 'fa':
-    case 'gu':
-    case 'hi':
-    case 'kn':
-    case 'mr':
-    case 'zu':
-      if (i === 0 || n === 1) return Plural.One;
-      return Plural.Other;
-    case 'ar':
-      if (n === 0) return Plural.Zero;
-      if (n === 1) return Plural.One;
-      if (n === 2) return Plural.Two;
-      if (n % 100 === Math.floor(n % 100) && n % 100 >= 3 && n % 100 <= 10) return Plural.Few;
-      if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 99) return Plural.Many;
-      return Plural.Other;
-    case 'ast':
-    case 'ca':
-    case 'de':
-    case 'en':
-    case 'et':
-    case 'fi':
-    case 'fy':
-    case 'gl':
-    case 'it':
-    case 'nl':
-    case 'sv':
-    case 'sw':
-    case 'ur':
-    case 'yi':
-      if (i === 1 && v === 0) return Plural.One;
-      return Plural.Other;
-    case 'be':
-      if (n % 10 === 1 && !(n % 100 === 11)) return Plural.One;
-      if (n % 10 === Math.floor(n % 10) && n % 10 >= 2 && n % 10 <= 4 &&
-          !(n % 100 >= 12 && n % 100 <= 14))
-        return Plural.Few;
-      if (n % 10 === 0 || n % 10 === Math.floor(n % 10) && n % 10 >= 5 && n % 10 <= 9 ||
-          n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 14)
-        return Plural.Many;
-      return Plural.Other;
-    case 'br':
-      if (n % 10 === 1 && !(n % 100 === 11 || n % 100 === 71 || n % 100 === 91)) return Plural.One;
-      if (n % 10 === 2 && !(n % 100 === 12 || n % 100 === 72 || n % 100 === 92)) return Plural.Two;
-      if (n % 10 === Math.floor(n % 10) && (n % 10 >= 3 && n % 10 <= 4 || n % 10 === 9) &&
-          !(n % 100 >= 10 && n % 100 <= 19 || n % 100 >= 70 && n % 100 <= 79 ||
-            n % 100 >= 90 && n % 100 <= 99))
-        return Plural.Few;
-      if (!(n === 0) && n % 1e6 === 0) return Plural.Many;
-      return Plural.Other;
-    case 'bs':
-    case 'hr':
-    case 'sr':
-      if (v === 0 && i % 10 === 1 && !(i % 100 === 11) || f % 10 === 1 && !(f % 100 === 11))
-        return Plural.One;
-      if (v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 &&
-              !(i % 100 >= 12 && i % 100 <= 14) ||
-          f % 10 === Math.floor(f % 10) && f % 10 >= 2 && f % 10 <= 4 &&
-              !(f % 100 >= 12 && f % 100 <= 14))
-        return Plural.Few;
-      return Plural.Other;
-    case 'cs':
-    case 'sk':
-      if (i === 1 && v === 0) return Plural.One;
-      if (i === Math.floor(i) && i >= 2 && i <= 4 && v === 0) return Plural.Few;
-      if (!(v === 0)) return Plural.Many;
-      return Plural.Other;
-    case 'cy':
-      if (n === 0) return Plural.Zero;
-      if (n === 1) return Plural.One;
-      if (n === 2) return Plural.Two;
-      if (n === 3) return Plural.Few;
-      if (n === 6) return Plural.Many;
-      return Plural.Other;
-    case 'da':
-      if (n === 1 || !(t === 0) && (i === 0 || i === 1)) return Plural.One;
-      return Plural.Other;
-    case 'dsb':
-    case 'hsb':
-      if (v === 0 && i % 100 === 1 || f % 100 === 1) return Plural.One;
-      if (v === 0 && i % 100 === 2 || f % 100 === 2) return Plural.Two;
-      if (v === 0 && i % 100 === Math.floor(i % 100) && i % 100 >= 3 && i % 100 <= 4 ||
-          f % 100 === Math.floor(f % 100) && f % 100 >= 3 && f % 100 <= 4)
-        return Plural.Few;
-      return Plural.Other;
-    case 'ff':
-    case 'fr':
-    case 'hy':
-    case 'kab':
-      if (i === 0 || i === 1) return Plural.One;
-      return Plural.Other;
-    case 'fil':
-      if (v === 0 && (i === 1 || i === 2 || i === 3) ||
-          v === 0 && !(i % 10 === 4 || i % 10 === 6 || i % 10 === 9) ||
-          !(v === 0) && !(f % 10 === 4 || f % 10 === 6 || f % 10 === 9))
-        return Plural.One;
-      return Plural.Other;
-    case 'ga':
-      if (n === 1) return Plural.One;
-      if (n === 2) return Plural.Two;
-      if (n === Math.floor(n) && n >= 3 && n <= 6) return Plural.Few;
-      if (n === Math.floor(n) && n >= 7 && n <= 10) return Plural.Many;
-      return Plural.Other;
-    case 'gd':
-      if (n === 1 || n === 11) return Plural.One;
-      if (n === 2 || n === 12) return Plural.Two;
-      if (n === Math.floor(n) && (n >= 3 && n <= 10 || n >= 13 && n <= 19)) return Plural.Few;
-      return Plural.Other;
-    case 'gv':
-      if (v === 0 && i % 10 === 1) return Plural.One;
-      if (v === 0 && i % 10 === 2) return Plural.Two;
-      if (v === 0 &&
-          (i % 100 === 0 || i % 100 === 20 || i % 100 === 40 || i % 100 === 60 || i % 100 === 80))
-        return Plural.Few;
-      if (!(v === 0)) return Plural.Many;
-      return Plural.Other;
-    case 'he':
-      if (i === 1 && v === 0) return Plural.One;
-      if (i === 2 && v === 0) return Plural.Two;
-      if (v === 0 && !(n >= 0 && n <= 10) && n % 10 === 0) return Plural.Many;
-      return Plural.Other;
-    case 'is':
-      if (t === 0 && i % 10 === 1 && !(i % 100 === 11) || !(t === 0)) return Plural.One;
-      return Plural.Other;
-    case 'ksh':
-      if (n === 0) return Plural.Zero;
-      if (n === 1) return Plural.One;
-      return Plural.Other;
-    case 'kw':
-    case 'naq':
-    case 'se':
-    case 'smn':
-      if (n === 1) return Plural.One;
-      if (n === 2) return Plural.Two;
-      return Plural.Other;
-    case 'lag':
-      if (n === 0) return Plural.Zero;
-      if ((i === 0 || i === 1) && !(n === 0)) return Plural.One;
-      return Plural.Other;
-    case 'lt':
-      if (n % 10 === 1 && !(n % 100 >= 11 && n % 100 <= 19)) return Plural.One;
-      if (n % 10 === Math.floor(n % 10) && n % 10 >= 2 && n % 10 <= 9 &&
-          !(n % 100 >= 11 && n % 100 <= 19))
-        return Plural.Few;
-      if (!(f === 0)) return Plural.Many;
-      return Plural.Other;
-    case 'lv':
-    case 'prg':
-      if (n % 10 === 0 || n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 19 ||
-          v === 2 && f % 100 === Math.floor(f % 100) && f % 100 >= 11 && f % 100 <= 19)
-        return Plural.Zero;
-      if (n % 10 === 1 && !(n % 100 === 11) || v === 2 && f % 10 === 1 && !(f % 100 === 11) ||
-          !(v === 2) && f % 10 === 1)
-        return Plural.One;
-      return Plural.Other;
-    case 'mk':
-      if (v === 0 && i % 10 === 1 || f % 10 === 1) return Plural.One;
-      return Plural.Other;
-    case 'mt':
-      if (n === 1) return Plural.One;
-      if (n === 0 || n % 100 === Math.floor(n % 100) && n % 100 >= 2 && n % 100 <= 10)
-        return Plural.Few;
-      if (n % 100 === Math.floor(n % 100) && n % 100 >= 11 && n % 100 <= 19) return Plural.Many;
-      return Plural.Other;
-    case 'pl':
-      if (i === 1 && v === 0) return Plural.One;
-      if (v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 &&
-          !(i % 100 >= 12 && i % 100 <= 14))
-        return Plural.Few;
-      if (v === 0 && !(i === 1) && i % 10 === Math.floor(i % 10) && i % 10 >= 0 && i % 10 <= 1 ||
-          v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 5 && i % 10 <= 9 ||
-          v === 0 && i % 100 === Math.floor(i % 100) && i % 100 >= 12 && i % 100 <= 14)
-        return Plural.Many;
-      return Plural.Other;
-    case 'pt':
-      if (n === Math.floor(n) && n >= 0 && n <= 2 && !(n === 2)) return Plural.One;
-      return Plural.Other;
-    case 'ro':
-      if (i === 1 && v === 0) return Plural.One;
-      if (!(v === 0) || n === 0 ||
-          !(n === 1) && n % 100 === Math.floor(n % 100) && n % 100 >= 1 && n % 100 <= 19)
-        return Plural.Few;
-      return Plural.Other;
-    case 'ru':
-    case 'uk':
-      if (v === 0 && i % 10 === 1 && !(i % 100 === 11)) return Plural.One;
-      if (v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 2 && i % 10 <= 4 &&
-          !(i % 100 >= 12 && i % 100 <= 14))
-        return Plural.Few;
-      if (v === 0 && i % 10 === 0 ||
-          v === 0 && i % 10 === Math.floor(i % 10) && i % 10 >= 5 && i % 10 <= 9 ||
-          v === 0 && i % 100 === Math.floor(i % 100) && i % 100 >= 11 && i % 100 <= 14)
-        return Plural.Many;
-      return Plural.Other;
-    case 'shi':
-      if (i === 0 || n === 1) return Plural.One;
-      if (n === Math.floor(n) && n >= 2 && n <= 10) return Plural.Few;
-      return Plural.Other;
-    case 'si':
-      if (n === 0 || n === 1 || i === 0 && f === 1) return Plural.One;
-      return Plural.Other;
-    case 'sl':
-      if (v === 0 && i % 100 === 1) return Plural.One;
-      if (v === 0 && i % 100 === 2) return Plural.Two;
-      if (v === 0 && i % 100 === Math.floor(i % 100) && i % 100 >= 3 && i % 100 <= 4 || !(v === 0))
-        return Plural.Few;
-      return Plural.Other;
-    case 'tzm':
-      if (n === Math.floor(n) && n >= 0 && n <= 1 || n === Math.floor(n) && n >= 11 && n <= 99)
-        return Plural.One;
-      return Plural.Other;
-    // When there is no specification, the default is always "other"
-    // Spec: http://cldr.unicode.org/index/cldr-spec/plural-rules
-    // > other (required—general plural form — also used if the language only has a single form)
-    default:
-      return Plural.Other;
-  }
-}
-
-function getPluralCategory(value: any, locale: string): string {
-  const plural = getPluralCase(locale, value);
-
-  switch (plural) {
-    case Plural.Zero:
-      return 'zero';
-    case Plural.One:
-      return 'one';
-    case Plural.Two:
-      return 'two';
-    case Plural.Few:
-      return 'few';
-    case Plural.Many:
-      return 'many';
-    default:
-      return 'other';
-  }
-}
-
 /**
  * Returns the index of the current case of an ICU expression depending on the main binding value
  *
@@ -1382,9 +1036,7 @@ function getCaseIndex(icuExpression: TIcu, bindingValue: string): number {
   if (index === -1) {
     switch (icuExpression.type) {
       case IcuType.plural: {
-        // TODO(ocombe): replace this hard-coded value by the real LOCALE_ID value
-        const locale = 'en-US';
-        const resolvedCase = getPluralCategory(bindingValue, locale);
+        const resolvedCase = getPluralCase(bindingValue, getLocaleId());
         index = icuExpression.cases.indexOf(resolvedCase);
         if (index === -1 && resolvedCase !== 'other') {
           index = icuExpression.cases.indexOf('other');
@@ -1630,7 +1282,7 @@ const LOCALIZE_PH_REGEXP = /\{\$(.*?)\}/g;
  * running outside of Closure Compiler. This method will not be needed once runtime translation
  * service support is introduced.
  *
- * @publicApi
+ * @codeGenApi
  * @deprecated this method is temporary & should not be used as it will be removed soon
  */
 export function ɵɵi18nLocalize(input: string, placeholders: {[key: string]: string} = {}) {
@@ -1641,3 +1293,31 @@ export function ɵɵi18nLocalize(input: string, placeholders: {[key: string]: st
       input.replace(LOCALIZE_PH_REGEXP, (match, key) => placeholders[key] || '') :
       input;
 }
+
+/**
+ * The locale id that the application is currently using (for translations and ICU expressions).
+ * This is the ivy version of `LOCALE_ID` that was defined as an injection token for the view engine
+ * but is now defined as a global value.
+ */
+export const DEFAULT_LOCALE_ID = 'en-US';
+let LOCALE_ID = DEFAULT_LOCALE_ID;
+
+/**
+ * Sets the locale id that will be used for translations and ICU expressions.
+ * This is the ivy version of `LOCALE_ID` that was defined as an injection token for the view engine
+ * but is now defined as a global value.
+ *
+ * @param localeId
+ */
+export function setLocaleId(localeId: string) {
+  LOCALE_ID = localeId.toLowerCase().replace(/_/g, '-');
+}
+
+/**
+ * Gets the locale id that will be used for translations and ICU expressions.
+ * This is the ivy version of `LOCALE_ID` that was defined as an injection token for the view engine
+ * but is now defined as a global value.
+ */
+export function getLocaleId(): string {
+  return LOCALE_ID;
+}

packages/core/src/render3/index.ts

@@ -100,6 +100,7 @@ export {
 } from './state';
 
 export {
+  DEFAULT_LOCALE_ID,
   ɵɵi18n,
   ɵɵi18nAttributes,
   ɵɵi18nExp,
@@ -109,6 +110,8 @@ export {
   ɵɵi18nPostprocess,
   i18nConfigureLocalize,
   ɵɵi18nLocalize,
+  getLocaleId,
+  setLocaleId,
 } from './i18n';
 
 export {NgModuleFactory, NgModuleRef, NgModuleType} from './ng_module_ref';

packages/core/src/render3/jit/module.ts

@@ -99,7 +99,6 @@ export function compileNgModuleDefs(moduleType: NgModuleType, ngModule: NgModule
   ngDevMode && assertDefined(moduleType, 'Required value moduleType');
   ngDevMode && assertDefined(ngModule, 'Required value ngModule');
   const declarations: Type<any>[] = flatten(ngModule.declarations || EMPTY_ARRAY);
-
   let ngModuleDef: any = null;
   Object.defineProperty(moduleType, NG_MODULE_DEF, {
     configurable: true,

packages/core/src/render3/ng_module_ref.ts

@@ -17,7 +17,8 @@ import {NgModuleDef} from '../metadata/ng_module';
 import {assertDefined} from '../util/assert';
 import {stringify} from '../util/stringify';
 import {ComponentFactoryResolver} from './component_ref';
-import {getNgModuleDef} from './definition';
+import {getNgLocaleIdDef, getNgModuleDef} from './definition';
+import {setLocaleId} from './i18n';
 import {maybeUnwrapFn} from './util/misc_utils';
 
 export interface NgModuleType<T = any> extends Type<T> { ngModuleDef: NgModuleDef<T>; }
@@ -44,6 +45,11 @@ export class NgModuleRef<T> extends viewEngine_NgModuleRef<T> implements Interna
                      ngModuleDef,
                      `NgModule '${stringify(ngModuleType)}' is not a subtype of 'NgModuleType'.`);
 
+    const ngLocaleIdDef = getNgLocaleIdDef(ngModuleType);
+    if (ngLocaleIdDef) {
+      setLocaleId(ngLocaleIdDef);
+    }
+
     this._bootstrapComponents = maybeUnwrapFn(ngModuleDef !.bootstrap);
     const additionalProviders: StaticProvider[] = [
       {