fix(@angular-devkit/build-angular): set HTML lang attribute when serving

When using the non-deprecated localization options, the development server was not properly setting the HTML `lang` attribute for the application.  This change ensures that the active locale is used within the application's index HTML file.

Closes #18094

(cherry picked from commit 58a7dea)

Author: clydin

packages/angular_devkit/build_angular/src/dev-server/index.ts

@@ -95,6 +95,7 @@ export function serveWebpackBrowser(
     webpackDevServerConfig: WebpackDevServer.Configuration;
     port: number;
     projectRoot: string;
+    locale: string | undefined;
   }> {
     // Get the browser configuration from the target name.
     const rawBrowserOptions = await context.getTargetOptions(browserTarget);
@@ -156,11 +157,13 @@ export function serveWebpackBrowser(
       webpackDevServerConfig,
       port,
       projectRoot,
+      locale:
+        browserOptions.i18nLocale || (i18n.shouldInline ? [...i18n.inlineLocales][0] : undefined),
     };
   }
 
   return from(setup()).pipe(
-    switchMap(({ browserOptions, webpackConfig, webpackDevServerConfig, port, projectRoot }) => {
+    switchMap(({ browserOptions, webpackConfig, webpackDevServerConfig, port, projectRoot, locale }) => {
       options.port = port;
 
       // Resolve public host and client address.
@@ -219,7 +222,7 @@ export function serveWebpackBrowser(
             noModuleEntrypoints: ['polyfills-es5'],
             postTransform: transforms.indexHtml,
             crossOrigin: browserOptions.crossOrigin,
-            lang: browserOptions.i18nLocale,
+            lang: locale,
           }),
         );
       }

packages/angular_devkit/build_angular/src/dev-server/index_spec.ts

@@ -104,4 +104,42 @@ describe('Dev Server Builder index', () => {
     );
     await run.stop();
   });
+
+  it('sets HTML lang attribute with the active locale', async () => {
+    const locale = 'fr';
+    const { workspace } = await workspaces.readWorkspace(host.root(), workspaces.createWorkspaceHost(host));
+    const app = workspace.projects.get('app');
+    if (!app) {
+      fail('Test application "app" not found.');
+
+      return;
+    }
+
+    app.extensions['i18n'] = {
+      locales: {
+        [locale]: [],
+      },
+    };
+
+    const target = app.targets.get('build');
+    if (!target) {
+      fail('Test application "app" target "build" not found.');
+
+      return;
+    }
+    if (!target.options) {
+      target.options = {};
+    }
+    target.options.localize = [locale];
+
+    await workspaces.writeWorkspace(workspace, workspaces.createWorkspaceHost(host));
+
+    const architect = (await createArchitect(host.root())).architect;
+    const run = await architect.scheduleTarget(targetSpec);
+    const output = (await run.result) as DevServerBuilderOutput;
+    expect(output.success).toBe(true);
+    const response = await fetch('http://localhost:4200/index.html');
+    expect(await response.text()).toContain(`lang="${locale}"`);
+    await run.stop();
+  });
 });