feat(@angular-devkit/build-angular): set document locale when using i18nLocale

TinyMan · vikerman · commit c5869f57bc66 · 2019-10-02T10:55:15.000-07:00
Fixes #8102
diff --git a/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/index-html-webpack-plugin.ts b/packages/angular_devkit/build_angular/src/angular-cli-files/plugins/index-html-webpack-plugin.ts
@@ -27,6 +27,7 @@ export interface IndexHtmlWebpackPluginOptions {
   moduleEntrypoints: string[];
   postTransform?: IndexHtmlTransform;
   crossOrigin?: CrossOriginValue;
+  lang?: string;
 }
 
 function readFile(filename: string, compilation: compilation.Compilation): Promise<string> {
@@ -100,6 +101,7 @@ export class IndexHtmlWebpackPlugin {
         loadOutputFile,
         moduleFiles,
         entrypoints: this._options.entrypoints,
+        lang: this._options.lang,
       });
 
       if (this._options.postTransform) {
diff --git a/packages/angular_devkit/build_angular/src/angular-cli-files/utilities/index-file/augment-index-html.ts b/packages/angular_devkit/build_angular/src/angular-cli-files/utilities/index-file/augment-index-html.ts
@@ -42,6 +42,8 @@ export interface AugmentIndexHtmlOptions {
   loadOutputFile: LoadOutputFileFunctionType;
   /** Used to sort the inseration of files in the HTML file */
   entrypoints: string[];
+  /** Used to set the document default locale */
+  lang?: string;
 }
 
 export interface FileInfo {
@@ -56,6 +58,7 @@ export interface FileInfo {
  * after processing several configurations in order to build different sets of
  * bundles for differential serving.
  */
+// tslint:disable-next-line: no-big-function
 export async function augmentIndexHtml(params: AugmentIndexHtmlOptions): Promise<string> {
   const { loadOutputFile, files, noModuleFiles = [], moduleFiles = [], entrypoints } = params;
 
@@ -91,8 +94,10 @@ export async function augmentIndexHtml(params: AugmentIndexHtmlOptions): Promise
   const document = parse5.parse(params.inputContent, { treeAdapter, locationInfo: true });
   let headElement;
   let bodyElement;
+  let htmlElement;
   for (const docChild of document.childNodes) {
     if (docChild.tagName === 'html') {
+      htmlElement = docChild;
       for (const htmlChild of docChild.childNodes) {
         if (htmlChild.tagName === 'head') {
           headElement = htmlChild;
@@ -241,6 +246,33 @@ export async function augmentIndexHtml(params: AugmentIndexHtmlOptions): Promise
 
   indexSource.insert(styleInsertionPoint, parse5.serialize(styleElements, { treeAdapter }));
 
+  // Adjust document locale if specified
+  if (typeof params.lang == 'string') {
+
+    const htmlFragment = treeAdapter.createDocumentFragment();
+
+    let langAttribute;
+    for (const attribute of htmlElement.attrs) {
+      if (attribute.name === 'lang') {
+        langAttribute = attribute;
+      }
+    }
+    if (langAttribute) {
+      langAttribute.value = params.lang;
+    } else {
+      htmlElement.attrs.push({ name: 'lang', value: params.lang });
+    }
+    // we want only openning tag
+    htmlElement.childNodes = [];
+
+    treeAdapter.appendChild(htmlFragment, htmlElement);
+    indexSource.replace(
+      htmlElement.__location.startTag.startOffset,
+      htmlElement.__location.startTag.endOffset - 1,
+      parse5.serialize(htmlFragment, { treeAdapter }).replace('</html>', ''),
+    );
+  }
+
   return indexSource.source();
 }
 
diff --git a/packages/angular_devkit/build_angular/src/angular-cli-files/utilities/index-file/augment-index-html_spec.ts b/packages/angular_devkit/build_angular/src/angular-cli-files/utilities/index-file/augment-index-html_spec.ts
@@ -132,4 +132,21 @@ describe('augment-index-html', () => {
     `);
     });
 
+  it('should add lang attribute', async () => {
+    const source = augmentIndexHtml({
+      ...indexGeneratorOptions,
+      lang: 'fr',
+    });
+
+    const html = await source;
+    expect(html).toEqual(oneLineHtml`
+        <html lang="fr">
+          <head>
+            <base href="/">
+          </head>
+          <body>
+          </body>
+        </html>
+      `);
+  });
 });
diff --git a/packages/angular_devkit/build_angular/src/angular-cli-files/utilities/index-file/write-index-html.ts b/packages/angular_devkit/build_angular/src/angular-cli-files/utilities/index-file/write-index-html.ts
@@ -31,6 +31,7 @@ export interface WriteIndexHtmlOptions {
   styles?: ExtraEntryPoint[];
   postTransform?: IndexHtmlTransform;
   crossOrigin?: CrossOriginValue;
+  lang?: string;
 }
 
 export type IndexHtmlTransform = (content: string) => Promise<string>;
@@ -49,6 +50,7 @@ export function writeIndexHtml({
   styles = [],
   postTransform,
   crossOrigin,
+  lang,
 }: WriteIndexHtmlOptions): Observable<void> {
   return host.read(indexPath).pipe(
     map(content => stripBom(virtualFs.fileBufferToString(content))),
@@ -70,6 +72,7 @@ export function writeIndexHtml({
             .pipe(map(data => virtualFs.fileBufferToString(data)))
             .toPromise();
         },
+        lang: lang,
       }),
     ),
     switchMap(content => (postTransform ? postTransform(content) : of(content))),
diff --git a/packages/angular_devkit/build_angular/src/browser/index.ts b/packages/angular_devkit/build_angular/src/browser/index.ts
@@ -708,6 +708,7 @@ export function buildWebpackBrowser(
                 styles: options.styles,
                 postTransform: transforms.indexHtml,
                 crossOrigin: options.crossOrigin,
+                lang: options.i18nLocale,
               })
                 .pipe(
                   map(() => ({ success: true })),
diff --git a/packages/angular_devkit/build_angular/src/dev-server/index.ts b/packages/angular_devkit/build_angular/src/dev-server/index.ts
@@ -209,6 +209,7 @@ export function serveWebpackBrowser(
             noModuleEntrypoints: ['polyfills-es5'],
             postTransform: transforms.indexHtml,
             crossOrigin: browserOptions.crossOrigin,
+            lang: browserOptions.i18nLocale,
           }),
         );
       }
diff --git a/tests/legacy-cli/e2e/tests/i18n/build-locale.ts b/tests/legacy-cli/e2e/tests/i18n/build-locale.ts
@@ -19,11 +19,13 @@ export default function () {
     .then(() => expectFileToMatch('dist/test-project/main-es5.js', /angular_common_locales_fr/))
     .then(() => expectFileToMatch('dist/test-project/main-es2015.js', /registerLocaleData/))
     .then(() => expectFileToMatch('dist/test-project/main-es2015.js', /angular_common_locales_fr/))
+    .then(() => expectFileToMatch('dist/test-project/index.html', /lang="fr"/))
     .then(() => rimraf('dist'))
     .then(() => ng('build', '--aot', '--i18n-locale=fr_FR'))
     .then(() => expectFileToMatch('dist/test-project/main-es2015.js', /registerLocaleData/))
     .then(() => expectFileToMatch('dist/test-project/main-es2015.js', /angular_common_locales_fr/))
     .then(() => expectFileToMatch('dist/test-project/main-es5.js', /registerLocaleData/))
     .then(() => expectFileToMatch('dist/test-project/main-es5.js', /angular_common_locales_fr/))
+    .then(() => expectFileToMatch('dist/test-project/index.html', /lang="fr_FR"/))
     .then(() => rimraf('dist'));
 }

Original file line number	Diff line number	Diff line change
`@@ -209,6 +209,7 @@ export function serveWebpackBrowser(`
`209`	`209`	`noModuleEntrypoints: ['polyfills-es5'],`
`210`	`210`	`postTransform: transforms.indexHtml,`
`211`	`211`	`crossOrigin: browserOptions.crossOrigin,`
	`212`	`+ lang: browserOptions.i18nLocale,`
`212`	`213`	`}),`
`213`	`214`	`);`
`214`	`215`	`}`