fix(@angular-devkit/build-angular): automatically purge stale build cache entries

With every build-angular release, previously created cache entries get stale and are no longer used. This causes the cache to keep growing as older files are not purged.

With this change we automatically purge entries that have been created with older version of build-angular and can no longer be used with the current installed version.

Closes #22323

Author: alan-agius4

packages/angular_devkit/build_angular/src/babel/webpack-loader.ts

@@ -10,6 +10,7 @@ import remapping from '@ampproject/remapping';
 import { custom } from 'babel-loader';
 import { ScriptTarget } from 'typescript';
 import { loadEsmModule } from '../utils/load-esm';
+import { VERSION } from '../utils/package-version';
 import { ApplicationPresetOptions, I18nPluginCreators } from './presets/application';
 
 interface AngularCustomOptions extends Omit<ApplicationPresetOptions, 'instrumentCode'> {
@@ -196,7 +197,7 @@ export default custom<ApplicationPresetOptions>(() => {
         ...baseOptions,
         ...rawOptions,
         cacheIdentifier: JSON.stringify({
-          buildAngular: require('../../package.json').version,
+          buildAngular: VERSION,
           customOptions,
           baseOptions,
           rawOptions,

packages/angular_devkit/build_angular/src/builders/browser/index.ts

@@ -39,6 +39,7 @@ import {
 import { normalizeCacheOptions } from '../../utils/normalize-cache';
 import { ensureOutputPaths } from '../../utils/output-paths';
 import { generateEntryPoints } from '../../utils/package-chunk-sort';
+import { purgeStaleBuildCache } from '../../utils/purge-cache';
 import { augmentAppWithServiceWorker } from '../../utils/service-worker';
 import { Spinner } from '../../utils/spinner';
 import { getSupportedBrowsers } from '../../utils/supported-browsers';
@@ -157,6 +158,9 @@ export function buildWebpackBrowser(
         ),
       );
 
+      // Purge old build disk cache.
+      await purgeStaleBuildCache(context);
+
       checkInternetExplorerSupport(sysProjectRoot, context.logger);
 
       return {

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

@@ -28,6 +28,7 @@ import { IndexHtmlTransform } from '../../utils/index-file/index-html-generator'
 import { createTranslationLoader } from '../../utils/load-translations';
 import { NormalizedCachedOptions, normalizeCacheOptions } from '../../utils/normalize-cache';
 import { generateEntryPoints } from '../../utils/package-chunk-sort';
+import { purgeStaleBuildCache } from '../../utils/purge-cache';
 import { assertCompatibleAngularVersion } from '../../utils/version';
 import {
   generateI18nBrowserWebpackConfigFromContext,
@@ -90,6 +91,9 @@ export function serveWebpackBrowser(
       throw new Error('The builder requires a target.');
     }
 
+    // Purge old build disk cache.
+    await purgeStaleBuildCache(context);
+
     options.port = await checkPort(options.port ?? 4200, options.host || 'localhost');
 
     if (options.hmr) {

packages/angular_devkit/build_angular/src/builders/extract-i18n/index.ts

@@ -17,6 +17,7 @@ import webpack, { Configuration } from 'webpack';
 import { ExecutionTransformer } from '../../transforms';
 import { createI18nOptions } from '../../utils/i18n-options';
 import { loadEsmModule } from '../../utils/load-esm';
+import { purgeStaleBuildCache } from '../../utils/purge-cache';
 import { assertCompatibleAngularVersion } from '../../utils/version';
 import { generateBrowserWebpackConfigFromContext } from '../../utils/webpack-browser-config';
 import { getCommonConfig } from '../../webpack/configs';
@@ -130,6 +131,9 @@ export async function execute(
   // Check Angular version.
   assertCompatibleAngularVersion(context.workspaceRoot);
 
+  // Purge old build disk cache.
+  await purgeStaleBuildCache(context);
+
   const browserTarget = targetFromTargetString(options.browserTarget);
   const browserOptions = await context.validateOptions<JsonObject & BrowserBuilderOptions>(
     await context.getTargetOptions(browserTarget),

packages/angular_devkit/build_angular/src/builders/karma/index.ts

@@ -14,6 +14,7 @@ import { Observable, from } from 'rxjs';
 import { defaultIfEmpty, switchMap } from 'rxjs/operators';
 import { Configuration } from 'webpack';
 import { ExecutionTransformer } from '../../transforms';
+import { purgeStaleBuildCache } from '../../utils/purge-cache';
 import { assertCompatibleAngularVersion } from '../../utils/version';
 import { generateBrowserWebpackConfigFromContext } from '../../utils/webpack-browser-config';
 import { getCommonConfig, getStylesConfig } from '../../webpack/configs';
@@ -32,6 +33,9 @@ async function initialize(
   context: BuilderContext,
   webpackConfigurationTransformer?: ExecutionTransformer<Configuration>,
 ): Promise<[typeof import('karma'), Configuration]> {
+  // Purge old build disk cache.
+  await purgeStaleBuildCache(context);
+
   const { config } = await generateBrowserWebpackConfigFromContext(
     // only two properties are missing:
     // * `outputPath` which is fixed for tests

packages/angular_devkit/build_angular/src/builders/ng-packagr/index.ts

@@ -11,6 +11,7 @@ import { join, resolve } from 'path';
 import { Observable, from, of } from 'rxjs';
 import { catchError, mapTo, switchMap } from 'rxjs/operators';
 import { normalizeCacheOptions } from '../../utils/normalize-cache';
+import { purgeStaleBuildCache } from '../../utils/purge-cache';
 import { Schema as NgPackagrBuilderOptions } from './schema';
 
 /**
@@ -22,6 +23,9 @@ export function execute(
 ): Observable<BuilderOutput> {
   return from(
     (async () => {
+      // Purge old build disk cache.
+      await purgeStaleBuildCache(context);
+
       const root = context.workspaceRoot;
       const packager = (await import('ng-packagr')).ngPackagr();
 

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

@@ -19,6 +19,7 @@ import { NormalizedBrowserBuilderSchema, deleteOutputDir } from '../../utils';
 import { i18nInlineEmittedFiles } from '../../utils/i18n-inlining';
 import { I18nOptions } from '../../utils/i18n-options';
 import { ensureOutputPaths } from '../../utils/output-paths';
+import { purgeStaleBuildCache } from '../../utils/purge-cache';
 import { assertCompatibleAngularVersion } from '../../utils/version';
 import { generateI18nBrowserWebpackConfigFromContext } from '../../utils/webpack-browser-config';
 import { getCommonConfig, getStylesConfig } from '../../webpack/configs';
@@ -146,6 +147,9 @@ async function initialize(
   i18n: I18nOptions;
   target: ScriptTarget;
 }> {
+  // Purge old build disk cache.
+  await purgeStaleBuildCache(context);
+
   const originalOutputPath = options.outputPath;
   const { config, i18n, target } = await generateI18nBrowserWebpackConfigFromContext(
     {

packages/angular_devkit/build_angular/src/utils/index-file/inline-fonts.ts

@@ -13,10 +13,9 @@ import proxyAgent from 'https-proxy-agent';
 import { join } from 'path';
 import { URL } from 'url';
 import { NormalizedCachedOptions } from '../normalize-cache';
+import { VERSION } from '../package-version';
 import { htmlRewritingStream } from './html-rewriting-stream';
 
-const packageVersion = require('../../../package.json').version;
-
 interface FontProviderDetails {
   preconnectUrl: string;
 }
@@ -156,7 +155,7 @@ export class InlineFontsProcessor {
   }
 
   private async getResponse(url: URL): Promise<string> {
-    const key = `${packageVersion}|${url}`;
+    const key = `${VERSION}|${url}`;
 
     if (this.cachePath) {
       const entry = await cacache.get.info(this.cachePath, key);

packages/angular_devkit/build_angular/src/utils/normalize-cache.ts

@@ -7,12 +7,17 @@
  */
 
 import { json } from '@angular-devkit/core';
-import { resolve } from 'path';
+import { join, resolve } from 'path';
 import { cachingDisabled } from './environment-options';
+import { VERSION } from './package-version';
 
 export interface NormalizedCachedOptions {
+  /** Whether disk cache is enabled. */
   enabled: boolean;
+  /** Disk cache path. Example: `/.angular/cache/v12.0.0`. */
   path: string;
+  /** Disk cache base path. Example: `/.angular/cache`. */
+  basePath: string;
 }
 
 interface CacheMetadata {
@@ -49,8 +54,11 @@ export function normalizeCacheOptions(
     }
   }
 
+  const cacheBasePath = resolve(worspaceRoot, path);
+
   return {
     enabled: cacheEnabled,
-    path: resolve(worspaceRoot, path),
+    basePath: cacheBasePath,
+    path: join(cacheBasePath, VERSION),
   };
 }

packages/angular_devkit/build_angular/src/utils/package-version.ts

@@ -0,0 +1,9 @@
+/**
+ * @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
+ */
+
+export const VERSION: string = require('../../package.json').version;

packages/angular_devkit/build_angular/src/utils/purge-cache.ts

@@ -0,0 +1,53 @@
+/**
+ * @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
+ */
+
+import { BuilderContext } from '@angular-devkit/architect';
+import { PathLike, existsSync, promises as fsPromises } from 'fs';
+import { join } from 'path';
+import { normalizeCacheOptions } from './normalize-cache';
+
+/** Delete stale cache directories used by previous versions of build-angular. */
+export async function purgeStaleBuildCache(context: BuilderContext): Promise<void> {
+  const projectName = context.target?.project;
+  if (!projectName) {
+    return;
+  }
+
+  const metadata = await context.getProjectMetadata(projectName);
+  const { basePath, path, enabled } = normalizeCacheOptions(metadata, context.workspaceRoot);
+
+  if (!enabled || !existsSync(basePath)) {
+    return;
+  }
+
+  // The below should be removed and replaced with just `rm` when support for Node.Js 12 is removed.
+  const { rm, rmdir } = fsPromises as typeof fsPromises & {
+    rm?: (
+      path: PathLike,
+      options?: {
+        force?: boolean;
+        maxRetries?: number;
+        recursive?: boolean;
+        retryDelay?: number;
+      },
+    ) => Promise<void>;
+  };
+
+  const entriesToDelete = (await fsPromises.readdir(basePath, { withFileTypes: true }))
+    .filter((d) => join(basePath, d.name) !== path && d.isDirectory())
+    .map((d) => {
+      const subPath = join(basePath, d.name);
+      try {
+        return rm
+          ? rm(subPath, { force: true, recursive: true, maxRetries: 3 })
+          : rmdir(subPath, { recursive: true, maxRetries: 3 });
+      } catch {}
+    });
+
+  await Promise.all(entriesToDelete);
+}

packages/angular_devkit/build_angular/src/webpack/utils/helpers.ts

@@ -19,6 +19,7 @@ import {
   ExtraEntryPointClass,
 } from '../../builders/browser/schema';
 import { WebpackConfigOptions } from '../../utils/build-options';
+import { VERSION } from '../../utils/package-version';
 
 export interface HashFormat {
   chunk: string;
@@ -122,8 +123,6 @@ export function getCacheSettings(
 ): WebpackOptionsNormalized['cache'] {
   const { enabled, path: cacheDirectory } = wco.buildOptions.cache;
   if (enabled) {
-    const packageVersion = require('../../../package.json').version;
-
     return {
       type: 'filesystem',
       profile: wco.buildOptions.verbose,
@@ -134,7 +133,7 @@ export function getCacheSettings(
       // None of which are "named".
       name: createHash('sha1')
         .update(angularVersion)
-        .update(packageVersion)
+        .update(VERSION)
         .update(wco.projectRoot)
         .update(JSON.stringify(wco.tsConfig))
         .update(

tests/legacy-cli/e2e/tests/build/disk-cache-purge.ts

@@ -0,0 +1,27 @@
+import { join } from 'path';
+import { createDir, expectFileNotToExist, expectFileToExist } from '../../utils/fs';
+import { ng } from '../../utils/process';
+import { updateJsonFile } from '../../utils/project';
+
+export default async function () {
+  const cachePath = '.angular/cache';
+  const staleCachePath = join(cachePath, 'v1.0.0');
+
+  // Enable cache for all environments
+  await updateJsonFile('angular.json', (config) => {
+    config.cli ??= {};
+    config.cli.cache = {
+      environment: 'all',
+      enabled: true,
+      path: cachePath,
+    };
+  });
+
+  // Create a dummy stale disk cache directory.
+  await createDir(staleCachePath);
+  await expectFileToExist(staleCachePath);
+
+  await ng('build');
+  await expectFileToExist(cachePath);
+  await expectFileNotToExist(staleCachePath);
+}