From b835389c8a60749151039ed0baf0be025ce0932b Mon Sep 17 00:00:00 2001
From: Alan Agius <alan.agius4@gmail.com>
Date: Wed, 1 Dec 2021 22:48:58 +0100
Subject: [PATCH] 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 52c6c3df33929d79c233282f6851e2be2f04c343)
---
 .../extract-i18n/ivy-extract-loader.ts        |  5 +++
 .../e2e/tests/i18n/extract-ivy-disk-cache.ts  | 36 +++++++++++++++++++
 .../legacy-cli/e2e/tests/i18n/extract-ivy.ts  |  4 ++-
 3 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 tests/legacy-cli/e2e/tests/i18n/extract-ivy-disk-cache.ts

diff --git a/packages/angular_devkit/build_angular/src/builders/extract-i18n/ivy-extract-loader.ts b/packages/angular_devkit/build_angular/src/builders/extract-i18n/ivy-extract-loader.ts
index 50da54cfe7b4..4a6353662761 100644
--- a/packages/angular_devkit/build_angular/src/builders/extract-i18n/ivy-extract-loader.ts
+++ b/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();
 
diff --git a/tests/legacy-cli/e2e/tests/i18n/extract-ivy-disk-cache.ts b/tests/legacy-cli/e2e/tests/i18n/extract-ivy-disk-cache.ts
new file mode 100644
index 000000000000..61a2f48e62f5
--- /dev/null
+++ b/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');
+}
diff --git a/tests/legacy-cli/e2e/tests/i18n/extract-ivy.ts b/tests/legacy-cli/e2e/tests/i18n/extract-ivy.ts
index 3693481d5ede..9c796f896c01 100644
--- a/tests/legacy-cli/e2e/tests/i18n/extract-ivy.ts
+++ b/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');
 }