fix(@angular-devkit/build-angular): ensure $localize calls are repl…

…aced in watch mode

When `translations` is undefined `$localize` calls are not replaced.

https://github.com/angular/angular-cli/blob/2c9a33dddb38694b6940ec6981c49904de1ab636/packages/angular_devkit/build_angular/src/builders/dev-server/index.ts#L382

Closes #22435

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

@@ -388,7 +388,8 @@ async function setupLocalize(
             undefined,
             browserOptions.i18nDuplicateTranslation,
           );
-          i18nLoaderOptions.translation = localeDescription.translation;
+
+          i18nLoaderOptions.translation = localeDescription.translation ?? {};
         }
 
         compilation.hooks.finishModules.tap('build-angular', () => {

packages/angular_devkit/build_angular/src/builders/dev-server/tests/behavior/build_localize_replaced_watch_spec.ts

@@ -0,0 +1,82 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+/* eslint-disable max-len */
+import fetch from 'node-fetch'; // eslint-disable-line import/no-extraneous-dependencies
+import { concatMap, count, take, timeout } from 'rxjs/operators';
+import { URL } from 'url';
+import { serveWebpackBrowser } from '../../index';
+import {
+  BASE_OPTIONS,
+  BUILD_TIMEOUT,
+  DEV_SERVER_BUILDER_INFO,
+  describeBuilder,
+  setupBrowserTarget,
+} from '../setup';
+
+describeBuilder(serveWebpackBrowser, DEV_SERVER_BUILDER_INFO, (harness) => {
+  describe('Behavior: "i18n $localize calls are replaced during watching"', () => {
+    beforeEach(() => {
+      harness.useProject('test', {
+        root: '.',
+        sourceRoot: 'src',
+        cli: {
+          cache: {
+            enabled: false,
+          },
+        },
+        i18n: {
+          sourceLocale: {
+            'code': 'fr',
+          },
+        },
+      });
+
+      setupBrowserTarget(harness, { localize: ['fr'] });
+    });
+
+    it('$localize are replaced in watch', async () => {
+      harness.useTarget('serve', {
+        ...BASE_OPTIONS,
+      });
+
+      await harness.writeFile(
+        'src/app/app.component.html',
+        `
+          <p id="hello" i18n="An introduction header for this sample">Hello {{ title }}! </p>
+        `,
+      );
+
+      const buildCount = await harness
+        .execute()
+        .pipe(
+          timeout(BUILD_TIMEOUT),
+          concatMap(async ({ result }, index) => {
+            expect(result?.success).toBe(true);
+
+            const response = await fetch(new URL('main.js', `${result?.baseUrl}`));
+            expect(await response?.text()).not.toContain('$localize`:');
+
+            switch (index) {
+              case 0: {
+                await harness.modifyFile('src/app/app.component.html', (content) =>
+                  content.replace('introduction', 'intro'),
+                );
+                break;
+              }
+            }
+          }),
+          take(2),
+          count(),
+        )
+        .toPromise();
+
+      expect(buildCount).toBe(2);
+    });
+  });
+});

packages/angular_devkit/build_angular/src/builders/dev-server/tests/setup.ts

@@ -38,7 +38,7 @@ export const BASE_OPTIONS = Object.freeze<Schema>({
  * Maximum time for single build/rebuild
  * This accounts for CI variability.
  */
-export const BUILD_TIMEOUT = 15000;
+export const BUILD_TIMEOUT = 15_000;
 
 /**
  * Cached browser builder option schema