fix(@angular-devkit/build-angular): use a dash in bundle names

This updates the esbuild based builder to use a dash in bundles and media instead of a dot to be consistent with the chunks files `chunk-xxx.js`.

packages/angular_devkit/build_angular/src/builders/application/options.ts

@@ -100,12 +100,12 @@ export async function normalizeOptions(
  const outputNames = {
  bundles:
  options.outputHashing === OutputHashing.All || options.outputHashing === OutputHashing.Bundles
- ? '[name].[hash]'
+ ? '[name]-[hash]'
  : '[name]',
  media:
  'media/' +
  (options.outputHashing === OutputHashing.All || options.outputHashing === OutputHashing.Media
- ? '[name].[hash]'
+ ? '[name]-[hash]'
  : '[name]'),
  };
 

packages/angular_devkit/build_angular/src/builders/application/tests/options/output-hashing_spec.ts

@@ -31,10 +31,10 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
  const { result } = await harness.executeOnce();
  expect(result?.success).toBe(true);
 
- expect(harness.hasFileMatch('dist', /main\.[0-9A-Z]{8}\.js$/)).toBeTrue();
- expect(harness.hasFileMatch('dist', /polyfills\.[0-9A-Z]{8}\.js$/)).toBeTrue();
- expect(harness.hasFileMatch('dist', /styles\.[0-9A-Z]{8}\.css$/)).toBeTrue();
- expect(harness.hasFileMatch('dist/media', /spectrum\.[0-9A-Z]{8}\.png$/)).toBeTrue();
+ expect(harness.hasFileMatch('dist', /main-[0-9A-Z]{8}\.js$/)).toBeTrue();
+ expect(harness.hasFileMatch('dist', /polyfills-[0-9A-Z]{8}\.js$/)).toBeTrue();
+ expect(harness.hasFileMatch('dist', /styles-[0-9A-Z]{8}\.css$/)).toBeTrue();
+ expect(harness.hasFileMatch('dist/media', /spectrum-[0-9A-Z]{8}\.png$/)).toBeTrue();
  });
 
  it(`doesn't hash any filenames when not set`, async () => {
@@ -49,10 +49,10 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
  const { result } = await harness.executeOnce();
  expect(result?.success).toBe(true);
 
- expect(harness.hasFileMatch('dist', /main\.[0-9A-Z]{8}\.js$/)).toBeFalse();
- expect(harness.hasFileMatch('dist', /polyfills\.[0-9A-Z]{8}\.js$/)).toBeFalse();
- expect(harness.hasFileMatch('dist', /styles\.[0-9A-Z]{8}\.css$/)).toBeFalse();
- expect(harness.hasFileMatch('dist/media', /spectrum\.[0-9A-Z]{8}\.png$/)).toBeFalse();
+ expect(harness.hasFileMatch('dist', /main-[0-9A-Z]{8}\.js$/)).toBeFalse();
+ expect(harness.hasFileMatch('dist', /polyfills-[0-9A-Z]{8}\.js$/)).toBeFalse();
+ expect(harness.hasFileMatch('dist', /styles-[0-9A-Z]{8}\.css$/)).toBeFalse();
+ expect(harness.hasFileMatch('dist/media', /spectrum-[0-9A-Z]{8}\.png$/)).toBeFalse();
  });
 
  it(`doesn't hash any filenames when set to "none"`, async () => {
@@ -68,10 +68,10 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
  const { result } = await harness.executeOnce();
  expect(result?.success).toBe(true);
 
- expect(harness.hasFileMatch('dist', /main\.[0-9A-Z]{8}\.js$/)).toBeFalse();
- expect(harness.hasFileMatch('dist', /polyfills\.[0-9A-Z]{8}\.js$/)).toBeFalse();
- expect(harness.hasFileMatch('dist', /styles\.[0-9A-Z]{8}\.css$/)).toBeFalse();
- expect(harness.hasFileMatch('dist/media', /spectrum\.[0-9A-Z]{8}\.png$/)).toBeFalse();
+ expect(harness.hasFileMatch('dist', /main-[0-9A-Z]{8}\.js$/)).toBeFalse();
+ expect(harness.hasFileMatch('dist', /polyfills-[0-9A-Z]{8}\.js$/)).toBeFalse();
+ expect(harness.hasFileMatch('dist', /styles-[0-9A-Z]{8}\.css$/)).toBeFalse();
+ expect(harness.hasFileMatch('dist/media', /spectrum-[0-9A-Z]{8}\.png$/)).toBeFalse();
  });
 
  it(`hashes CSS resources filenames only when set to "media"`, async () => {
@@ -87,10 +87,10 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
  const { result } = await harness.executeOnce();
  expect(result?.success).toBe(true);
 
- expect(harness.hasFileMatch('dist', /main\.[0-9A-Z]{8}\.js$/)).toBeFalse();
- expect(harness.hasFileMatch('dist', /polyfills\.[0-9A-Z]{8}\.js$/)).toBeFalse();
- expect(harness.hasFileMatch('dist', /styles\.[0-9A-Z]{8}\.css$/)).toBeFalse();
- expect(harness.hasFileMatch('dist/media', /spectrum\.[0-9A-Z]{8}\.png$/)).toBeTrue();
+ expect(harness.hasFileMatch('dist', /main-[0-9A-Z]{8}\.js$/)).toBeFalse();
+ expect(harness.hasFileMatch('dist', /polyfills-[0-9A-Z]{8}\.js$/)).toBeFalse();
+ expect(harness.hasFileMatch('dist', /styles-[0-9A-Z]{8}\.css$/)).toBeFalse();
+ expect(harness.hasFileMatch('dist/media', /spectrum-[0-9A-Z]{8}\.png$/)).toBeTrue();
  });
 
  it(`hashes bundles filenames only when set to "bundles"`, async () => {
@@ -106,10 +106,10 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
  const { result } = await harness.executeOnce();
  expect(result?.success).toBe(true);
 
- expect(harness.hasFileMatch('dist', /main\.[0-9A-Z]{8}\.js$/)).toBeTrue();
- expect(harness.hasFileMatch('dist', /polyfills\.[0-9A-Z]{8}\.js$/)).toBeTrue();
- expect(harness.hasFileMatch('dist', /styles\.[0-9A-Z]{8}\.css$/)).toBeTrue();
- expect(harness.hasFileMatch('dist/media', /spectrum\.[0-9A-Z]{8}\.png$/)).toBeFalse();
+ expect(harness.hasFileMatch('dist', /main-[0-9A-Z]{8}\.js$/)).toBeTrue();
+ expect(harness.hasFileMatch('dist', /polyfills-[0-9A-Z]{8}\.js$/)).toBeTrue();
+ expect(harness.hasFileMatch('dist', /styles-[0-9A-Z]{8}\.css$/)).toBeTrue();
+ expect(harness.hasFileMatch('dist/media', /spectrum-[0-9A-Z]{8}\.png$/)).toBeFalse();
  });
 
  it('does not hash non injected styles', async () => {
@@ -128,8 +128,8 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
  const { result } = await harness.executeOnce();
  expect(result?.success).toBe(true);
 
- expect(harness.hasFileMatch('dist', /styles\.[0-9A-Z]{8}\.css$/)).toBeFalse();
- expect(harness.hasFileMatch('dist', /styles\.[0-9A-Z]{8}\.css.map$/)).toBeFalse();
+ expect(harness.hasFileMatch('dist', /styles-[0-9A-Z]{8}\.css$/)).toBeFalse();
+ expect(harness.hasFileMatch('dist', /styles-[0-9A-Z]{8}\.css.map$/)).toBeFalse();
  harness.expectFile('dist/styles.css').toExist();
  harness.expectFile('dist/styles.css.map').toExist();
  });

packages/angular_devkit/build_angular/src/tools/esbuild/bundler-context.ts

@@ -169,8 +169,8 @@ export class BundlerContext {
  outputFile.path = relativeFilePath;
 
  if (entryPoint) {
- // The first part of the filename is the name of file (e.g., "polyfills" for "polyfills.7S5G3MDY.js")
- const name = basename(relativeFilePath).split('.', 1)[0];
+ // The first part of the filename is the name of file (e.g., "polyfills" for "polyfills-7S5G3MDY.js")
+ const name = basename(relativeFilePath).replace(/(?:-[\dA-Z]{8})?\.[a-z]{2,3}$/, '');
  // Entry points are only styles or scripts
  const type = extname(relativeFilePath) === '.css' ? 'style' : 'script';
 

tests/legacy-cli/e2e/tests/basic/build.ts

@@ -16,8 +16,8 @@ export default async function () {
  // Production build
  const { stdout: stdout2 } = await ng('build');
  if (getGlobalVariable('argv')['esbuild']) {
- // esbuild uses an 8 character hash
- await expectFileToMatch('dist/test-project/index.html', /main\.[a-zA-Z0-9]{8}\.js/);
+ // esbuild uses an 8 character hash and a dash as separator
+ await expectFileToMatch('dist/test-project/index.html', /main-[a-zA-Z0-9]{8}\.js/);
  } else {
  await expectFileToMatch('dist/test-project/index.html', /main\.[a-zA-Z0-9]{16}\.js/);
  }

tests/legacy-cli/e2e/tests/basic/run.ts

@@ -10,8 +10,8 @@ export default async function () {
  // Production build
  await silentNg('run', 'test-project:build');
  if (getGlobalVariable('argv')['esbuild']) {
- // esbuild uses an 8 character hash
- await expectFileToMatch('dist/test-project/index.html', /main\.[a-zA-Z0-9]{8}\.js/);
+ // esbuild uses an 8 character hash and a dash as separator
+ await expectFileToMatch('dist/test-project/index.html', /main-[a-zA-Z0-9]{8}\.js/);
  } else {
  await expectFileToMatch('dist/test-project/index.html', /main\.[a-zA-Z0-9]{16}\.js/);
  }

tests/legacy-cli/e2e/tests/build/prod-build.ts

@@ -1,5 +1,6 @@
 import { statSync } from 'fs';
 import { join } from 'path';
+import { getGlobalVariable } from '../../utils/env';
 import { expectFileToExist, expectFileToMatch, readFile } from '../../utils/fs';
 import { noSilentNg } from '../../utils/process';
 
@@ -30,12 +31,21 @@ export default async function () {
  await noSilentNg('build');
  await expectFileToExist(join(process.cwd(), 'dist'));
  // Check for cache busting hash script src
- await expectFileToMatch('dist/test-project/index.html', /main\.[0-9a-zA-Z]{8,16}\.js/);
- await expectFileToMatch('dist/test-project/index.html', /styles\.[0-9a-zA-Z]{8,16}\.css/);
+ if (getGlobalVariable('argv')['esbuild']) {
+ // esbuild uses an 8 character hash and a dash as separator
+ await expectFileToMatch('dist/test-project/index.html', /main-[0-9a-zA-Z]{8}\.js/);
+ await expectFileToMatch('dist/test-project/index.html', /styles-[0-9a-zA-Z]{8}\.css/);
+ } else {
+ await expectFileToMatch('dist/test-project/index.html', /main\.[0-9a-zA-Z]{16}\.js/);
+ await expectFileToMatch('dist/test-project/index.html', /styles\.[0-9a-zA-Z]{16}\.css/);
+ }
  await expectFileToMatch('dist/test-project/3rdpartylicenses.txt', /MIT/);
 
  const indexContent = await readFile('dist/test-project/index.html');
- const mainPath = indexContent.match(/src="(main\.[0-9a-zA-Z]{0,32}\.js)"/)![1];
+ const mainSrcRegExp = getGlobalVariable('argv')['esbuild']
+ ? /src="(main-[0-9a-zA-Z]{8}\.js)"/
+ : /src="(main\.[0-9a-zA-Z]{16}\.js)"/;
+ const mainPath = indexContent.match(mainSrcRegExp)![1];
 
  // Content checks
  await expectFileToMatch(`dist/test-project/${mainPath}`, bootstrapRegExp);