fix(@angular-devkit/build-angular): correctly extract messages when using cached build (#22266)

* fix(@angular-devkit/build-angular): correctly extract messages when using cached build

Extracted messages are not part of Webpack pipeline and hence they cannot be retrieved from cache. Therefore, we need to mark the extraction loader as non cacheable.

Closes #22264

* fixup! fix(@angular-devkit/build-angular): correctly extract messages when using cached build

(cherry picked from commit 52c6c3d)

Author: alan-agius4

packages/angular_devkit/build_angular/src/builders/extract-i18n/ivy-extract-loader.ts

@@ -21,6 +21,11 @@ export default function localizeExtractLoader(
   content: string,
   map: LoaderSourceMap,
 ) {
+  // This loader is not cacheable due to how message extraction works.
+  // Extracted messages are not part of webpack pipeline and hence they cannot be retrieved from cache.
+  // TODO: We should investigate in the future on making this deterministic and more cacheable.
+  this.cacheable(false);
+
   const options = this.getOptions();
   const callback = this.async();
 

tests/legacy-cli/e2e/tests/i18n/extract-ivy-disk-cache.ts

@@ -0,0 +1,36 @@
+import { join } from 'path';
+import { getGlobalVariable } from '../../utils/env';
+import { expectFileToMatch, rimraf, writeFile } from '../../utils/fs';
+import { installPackage, uninstallPackage } from '../../utils/packages';
+import { ng } from '../../utils/process';
+import { updateJsonFile } from '../../utils/project';
+import { readNgVersion } from '../../utils/version';
+
+export default async function () {
+  // Enable disk cache
+  updateJsonFile('angular.json', (config) => {
+    config.cli ??= {};
+    config.cli.cache = { environment: 'all' };
+  });
+
+  // Setup an i18n enabled component
+  await ng('generate', 'component', 'i18n-test');
+  await writeFile(join('src/app/i18n-test', 'i18n-test.component.html'), '<p i18n>Hello world</p>');
+
+  // Install correct version
+  let localizeVersion = '@angular/localize@' + readNgVersion();
+  if (getGlobalVariable('argv')['ng-snapshots']) {
+    localizeVersion = require('../../ng-snapshot/package.json').dependencies['@angular/localize'];
+  }
+
+  await installPackage(localizeVersion);
+
+  for (let i = 0; i < 2; i++) {
+    // Run the extraction twice and make sure the second time round works with cache.
+    await rimraf('messages.xlf');
+    await ng('extract-i18n');
+    await expectFileToMatch('messages.xlf', 'Hello world');
+  }
+
+  await uninstallPackage('@angular/localize');
+}

tests/legacy-cli/e2e/tests/i18n/extract-ivy.ts

@@ -1,6 +1,6 @@
 import { join } from 'path';
 import { getGlobalVariable } from '../../utils/env';
-import { writeFile } from '../../utils/fs';
+import { expectFileToMatch, writeFile } from '../../utils/fs';
 import { installPackage, uninstallPackage } from '../../utils/packages';
 import { ng } from '../../utils/process';
 import { updateJsonFile } from '../../utils/project';
@@ -31,5 +31,7 @@ export default async function () {
     throw new Error('Expected no warnings to be shown');
   }
 
+  expectFileToMatch('messages.xlf', 'Hello world');
+
   await uninstallPackage('@angular/localize');
 }