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.
angular · Oct 15, 2020 · 2eed673 · 2eed673
1 parent 3063aba
commit 2eed673
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 2 deletions.
diff --git a/packages/angular_devkit/build_angular/src/dev-server/index.ts b/packages/angular_devkit/build_angular/src/dev-server/index.ts
@@ -92,6 +92,7 @@ export function serveWebpackBrowser(
     webpackConfig: webpack.Configuration;
     webpackDevServerConfig: WebpackDevServer.Configuration;
     projectRoot: string;
+    locale: string | undefined;
   }> {
     // Get the browser configuration from the target name.
     const rawBrowserOptions = await context.getTargetOptions(browserTarget);
@@ -151,11 +152,13 @@ export function serveWebpackBrowser(
       webpackConfig,
       webpackDevServerConfig,
       projectRoot,
+      locale:
+        browserOptions.i18nLocale || (i18n.shouldInline ? [...i18n.inlineLocales][0] : undefined),
     };
   }
 
   return from(setup()).pipe(
-    switchMap(({ browserOptions, webpackConfig, webpackDevServerConfig, projectRoot }) => {
+    switchMap(({ browserOptions, webpackConfig, webpackDevServerConfig, projectRoot, locale }) => {
       // Resolve public host and client address.
       let clientAddress = url.parse(`${options.ssl ? 'https' : 'http'}://0.0.0.0:0`);
       if (options.publicHost) {
@@ -212,7 +215,7 @@ export function serveWebpackBrowser(
             noModuleEntrypoints: ['polyfills-es5'],
             postTransform: transforms.indexHtml,
             crossOrigin: browserOptions.crossOrigin,
-            lang: browserOptions.i18nLocale,
+            lang: locale,
           }),
         );
       }

diff --git a/packages/angular_devkit/build_angular/src/dev-server/index_spec.ts b/packages/angular_devkit/build_angular/src/dev-server/index_spec.ts
@@ -101,4 +101,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();
+  });
 });