fix(@angular-devkit/build-angular): fallback to use language ID to set the dir attribute

alan-agius4 · filipesilva · commit d55fc62ef2f8 · 2021-12-06T14:50:26.000Z
In some cases we don't ship certain locales, or they map to files which are named only the language IDs. Example `en-US`, which it's locale data is available from `@angular/common/locales/en.mjs` Closes #22285
diff --git a/packages/angular_devkit/build_angular/src/utils/index-file/augment-index-html.ts b/packages/angular_devkit/build_angular/src/utils/index-file/augment-index-html.ts
@@ -222,20 +222,40 @@ function isString(value: unknown): value is string {
   return typeof value === 'string';
 }
 
-async function getLanguageDirection(lang: string, warnings: string[]): Promise<string | undefined> {
+async function getLanguageDirection(
+  locale: string,
+  warnings: string[],
+): Promise<string | undefined> {
+  const dir = await getLanguageDirectionFromLocales(locale);
+
+  if (!dir) {
+    warnings.push(
+      `Locale data for '${locale}' cannot be found. 'dir' attribute will not be set for this locale.`,
+    );
+  }
+
+  return dir;
+}
+
+async function getLanguageDirectionFromLocales(locale: string): Promise<string | undefined> {
   try {
     const localeData = (
       await loadEsmModule<typeof import('@angular/common/locales/en')>(
-        `@angular/common/locales/${lang}`,
+        `@angular/common/locales/${locale}`,
       )
     ).default;
 
     const dir = localeData[localeData.length - 2];
 
     return isString(dir) ? dir : undefined;
   } catch {
-    warnings.push(
-      `Locale data for '${lang}' cannot be found. 'dir' attribute will not be set for this locale.`,
-    );
+    // In some cases certain locales might map to files which are named only with language id.
+    // Example: `en-US` -> `en`.
+    const [languageId] = locale.split('-', 1);
+    if (languageId !== locale) {
+      return getLanguageDirectionFromLocales(languageId);
+    }
   }
+
+  return undefined;
 }
diff --git a/packages/angular_devkit/build_angular/src/utils/index-file/augment-index-html_spec.ts b/packages/angular_devkit/build_angular/src/utils/index-file/augment-index-html_spec.ts
@@ -104,6 +104,24 @@ describe('augment-index-html', () => {
       `);
   });
 
+  it(`should fallback to use language ID to set the dir attribute (en-US)`, async () => {
+    const { content, warnings } = await augmentIndexHtml({
+      ...indexGeneratorOptions,
+      lang: 'en-US',
+    });
+
+    expect(warnings).toHaveSize(0);
+    expect(content).toEqual(oneLineHtml`
+        <html lang="en-US" dir="ltr">
+          <head>
+            <base href="/">
+          </head>
+          <body>
+          </body>
+        </html>
+      `);
+  });
+
   it(`should work when lang (locale) is not provided by '@angular/common'`, async () => {
     const { content, warnings } = await augmentIndexHtml({
       ...indexGeneratorOptions,
