fix(@angular-devkit/build-angular): ensure to use content hash as filenames hashing mechanism

Previously we used hash which resulted in a unique hash generated for every build even when the contents of the files didn't differ.

More info: https://webpack.js.org/guides/caching/#output-filenames

Author: alan-agius4

packages/angular_devkit/build_angular/src/utils/build-options.ts

@@ -16,6 +16,7 @@ import {
   IndexUnion,
   InlineStyleLanguage,
   Localize,
+  OutputHashing,
   ScriptElement,
   SourceMapClass,
   StyleElement,
@@ -43,7 +44,7 @@ export interface BuildOptions {
   bundleDependencies?: boolean;
   externalDependencies?: string[];
   watch?: boolean;
-  outputHashing?: string;
+  outputHashing?: OutputHashing;
   poll?: number;
   index?: IndexUnion;
   deleteOutputPath?: boolean;

packages/angular_devkit/build_angular/src/webpack/configs/common.ts

@@ -98,7 +98,7 @@ export async function getCommonConfig(wco: WebpackConfigOptions): Promise<Config
   } = await loadEsmModule<typeof import('@angular/compiler-cli')>('@angular/compiler-cli');
 
   // determine hashing format
-  const hashFormat = getOutputHashFormat(buildOptions.outputHashing || 'none');
+  const hashFormat = getOutputHashFormat(buildOptions.outputHashing);
 
   if (buildOptions.progress) {
     extraPlugins.push(new ProgressPlugin(platform));

packages/angular_devkit/build_angular/src/webpack/configs/styles.ts

@@ -83,7 +83,7 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration {
   const cssSourceMap = buildOptions.sourceMap.styles;
 
   // Determine hashing format.
-  const hashFormat = getOutputHashFormat(buildOptions.outputHashing as string);
+  const hashFormat = getOutputHashFormat(buildOptions.outputHashing);
 
   // use includePaths from appConfig
   const includePaths =

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

@@ -13,7 +13,12 @@ import glob from 'glob';
 import * as path from 'path';
 import { ScriptTarget } from 'typescript';
 import type { Configuration, WebpackOptionsNormalized } from 'webpack';
-import { AssetPatternClass, ScriptElement, StyleElement } from '../../builders/browser/schema';
+import {
+  AssetPatternClass,
+  OutputHashing,
+  ScriptElement,
+  StyleElement,
+} from '../../builders/browser/schema';
 import { WebpackConfigOptions } from '../../utils/build-options';
 import { VERSION } from '../../utils/package-version';
 
@@ -24,25 +29,40 @@ export interface HashFormat {
   script: string;
 }
 
-export function getOutputHashFormat(option: string, length = 20): HashFormat {
-  const hashFormats: { [option: string]: HashFormat } = {
-    none: { chunk: '', extract: '', file: '', script: '' },
-    media: { chunk: '', extract: '', file: `.[hash:${length}]`, script: '' },
-    bundles: {
-      chunk: `.[contenthash:${length}]`,
-      extract: `.[contenthash:${length}]`,
-      file: '',
-      script: `.[hash:${length}]`,
-    },
-    all: {
-      chunk: `.[contenthash:${length}]`,
-      extract: `.[contenthash:${length}]`,
-      file: `.[hash:${length}]`,
-      script: `.[hash:${length}]`,
-    },
-  };
-
-  return hashFormats[option] || hashFormats['none'];
+export function getOutputHashFormat(outputHashing = OutputHashing.None, length = 20): HashFormat {
+  const hashTemplate = `.[contenthash:${length}]`;
+
+  switch (outputHashing) {
+    case 'media':
+      return {
+        chunk: '',
+        extract: '',
+        file: hashTemplate,
+        script: '',
+      };
+    case 'bundles':
+      return {
+        chunk: hashTemplate,
+        extract: hashTemplate,
+        file: '',
+        script: hashTemplate,
+      };
+    case 'all':
+      return {
+        chunk: hashTemplate,
+        extract: hashTemplate,
+        file: hashTemplate,
+        script: hashTemplate,
+      };
+    case 'none':
+    default:
+      return {
+        chunk: '',
+        extract: '',
+        file: '',
+        script: '',
+      };
+  }
 }
 
 export type NormalizedEntryPoint = Required<Exclude<ScriptElement | StyleElement, string>>;