From 1bd4529197d0eccdf7226a9e60635ebdf3ca70f6 Mon Sep 17 00:00:00 2001
From: Alan Agius <alan.agius4@gmail.com>
Date: Wed, 1 Dec 2021 14:20:17 +0100
Subject: [PATCH 1/2] 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
---
 .../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..bcc8c548aeaf 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 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');
 }

From f068aeeba40fa6899ce44d2cb4c680ac570e1270 Mon Sep 17 00:00:00 2001
From: Alan Agius <alan.agius4@gmail.com>
Date: Wed, 1 Dec 2021 22:35:23 +0100
Subject: [PATCH 2/2] fixup! fix(@angular-devkit/build-angular): correctly
 extract messages when using cached build

---
 .../src/builders/extract-i18n/ivy-extract-loader.ts             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 bcc8c548aeaf..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,7 +21,7 @@ export default function localizeExtractLoader(
   content: string,
   map: LoaderSourceMap,
 ) {
-  // This loader is not cacheable due to message extraction works.
+  // 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);