fix(@angular/build): correctly name entry points to match budgets

This commit addresses an issue where some lazy entry points were not name correctly to align with specified budgets. Closes: #27936 (cherry picked from commit f3ba208)
angular · Jun 27, 2024 · fc928f6 · fc928f6
1 parent 6aff0f8
commit fc928f6
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 7 deletions.
diff --git a/packages/angular/build/src/builders/application/tests/options/bundle-budgets_spec.ts b/packages/angular/build/src/builders/application/tests/options/bundle-budgets_spec.ts
@@ -93,6 +93,39 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
       );
     });
 
+    it(`should not warn when non-injected style is not within the baseline threshold`, async () => {
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        optimization: false,
+        styles: [
+          {
+            input: 'src/lazy-styles.css',
+            inject: false,
+            bundleName: 'lazy-styles',
+          },
+        ],
+        budgets: [
+          { type: Type.Bundle, name: 'lazy-styles', warning: '1kb', error: '1kb', baseline: '2kb' },
+        ],
+      });
+
+      await harness.writeFile(
+        'src/lazy-styles.css',
+        `
+          .foo { color: green; padding: 1px; }
+        `.repeat(24),
+      );
+
+      const { result, logs } = await harness.executeOnce();
+      expect(result?.success).toBeTrue();
+      expect(logs).not.toContain(
+        jasmine.objectContaining<logging.LogEntry>({
+          level: 'warn',
+          message: jasmine.stringMatching('lazy-styles failed to meet minimum budget'),
+        }),
+      );
+    });
+
     CSS_EXTENSIONS.forEach((ext) => {
       it(`shows warnings for large component ${ext} when using 'anyComponentStyle' when AOT`, async () => {
         const cssContent = `

diff --git a/packages/angular/build/src/tools/esbuild/budget-stats.ts b/packages/angular/build/src/tools/esbuild/budget-stats.ts
@@ -7,9 +7,9 @@
  */
 
 import type { Metafile } from 'esbuild';
-import { basename } from 'node:path';
 import type { BudgetStats } from '../../utils/bundle-calculator';
 import type { InitialFileRecord } from './bundler-context';
+import { getEntryPointName } from './utils';
 
 /**
  * Generates a bundle budget calculator compatible stats object that provides
@@ -43,9 +43,7 @@ export function generateBudgetStats(
     let name = initialRecord?.name;
     if (name === undefined && entry.entryPoint) {
       // For non-initial lazy modules, convert the entry point file into a Webpack compatible name
-      name = basename(entry.entryPoint)
-        .replace(/\.[cm]?[jt]s$/, '')
-        .replace(/[\\/.]/g, '-');
+      name = getEntryPointName(entry.entryPoint);
     }
 
     stats.chunks.push({

diff --git a/packages/angular/build/src/tools/esbuild/utils.ts b/packages/angular/build/src/tools/esbuild/utils.ts
@@ -66,9 +66,7 @@ export function logBuildStats(
 
     let name = initial.get(file)?.name;
     if (name === undefined && output.entryPoint) {
-      name = basename(output.entryPoint)
-        .replace(/\.[cm]?[jt]s$/, '')
-        .replace(/[\\/.]/g, '-');
+      name = getEntryPointName(output.entryPoint);
     }
 
     const stat: BundleStats = {
@@ -496,3 +494,10 @@ export function isZonelessApp(polyfills: string[] | undefined): boolean {
   // TODO: Instead, we should rely on the presence of zone.js in the polyfills build metadata.
   return !polyfills?.some((p) => p === 'zone.js' || /\.[mc]?[jt]s$/.test(p));
 }
+
+export function getEntryPointName(entryPoint: string): string {
+  return basename(entryPoint)
+    .replace(/(.*:)/, '') // global:bundle.css  -> bundle.css
+    .replace(/\.[cm]?[jt]s$/, '')
+    .replace(/[\\/.]/g, '-');
+}