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

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');
 }