fix(@angular/build): use component file path in inline stylesheet diagnostic locations

Rewrite internal angular:styles/component:<lang>;<hash>;<filename> virtual URIs in inline component stylesheet error, warning, and note locations to the component's file path, and ensure the component file path is added to watchFiles on error.

Author: alan-agius4

packages/angular/build/src/tools/esbuild/angular/component-stylesheets.ts

@@ -176,13 +176,24 @@ export class ComponentStylesheetBundler {
       );
     });
 
+    const result = await bundlerContext.bundle();
+    if (result.errors || result.warnings.length > 0) {
+      if (this.incremental && result.errors) {
+        bundlerContext.watchFiles.add(
+          path.isAbsolute(filename) ? filename : path.join(this.options.workspaceRoot, filename),
+        );
+      }
+      for (const message of [...(result.errors ?? []), ...result.warnings]) {
+        for (const item of [message, ...(message.notes ?? [])]) {
+          if (item.location?.file?.startsWith('angular:styles/component:')) {
+            item.location.file = filename;
+          }
+        }
+      }
+    }
+
     // Extract the result of the bundling from the output files
-    return this.extractResult(
-      await bundlerContext.bundle(),
-      bundlerContext.watchFiles,
-      !!externalId,
-      false,
-    );
+    return this.extractResult(result, bundlerContext.watchFiles, !!externalId, false);
   }
 
   /**

packages/angular/build/src/tools/esbuild/angular/component-stylesheets_spec.ts

@@ -0,0 +1,87 @@
+/**
+ * @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.dev/license
+ */
+
+import assert from 'node:assert';
+import { mkdtemp, rm } from 'node:fs/promises';
+import { join } from 'node:path';
+import { initializeHash } from '../../../utils/hash';
+import { ComponentStylesheetBundler } from './component-stylesheets';
+
+describe('ComponentStylesheetBundler', () => {
+  let tempRoot: string;
+
+  beforeAll(async () => {
+    await initializeHash();
+    const baseTmpDir = process.env['TEST_TMPDIR'];
+    assert(baseTmpDir, 'TEST_TMPDIR is not set');
+    tempRoot = await mkdtemp(join(baseTmpDir, 'angular-cli-component-stylesheets-'));
+  });
+
+  afterAll(async () => {
+    await rm(tempRoot, { force: true, recursive: true });
+  });
+
+  it('uses the component filename instead of angular:styles/component virtual URI in bundleInline error locations', async () => {
+    const bundler = new ComponentStylesheetBundler(
+      {
+        workspaceRoot: tempRoot,
+        optimization: false,
+        inlineFonts: false,
+        sourcemap: false,
+        outputNames: { bundles: '[name]', media: 'media/[name]' },
+        target: ['es2022'],
+        cacheOptions: { enabled: false, path: '', basePath: tempRoot },
+      },
+      'css',
+      true,
+    );
+
+    const componentFile = join(tempRoot, 'src', 'lib', 'lib.component.ts');
+
+    try {
+      const result = await bundler.bundleInline(
+        '.icon { background: url("./missing.png"); }',
+        componentFile,
+      );
+
+      assert(result.errors, 'Expected bundleInline to report a resolution error');
+      expect(result.errors.length).toBeGreaterThan(0);
+      expect(result.errors[0].location?.file).toBe(componentFile);
+      expect(result.referencedFiles).toContain(componentFile);
+    } finally {
+      await bundler.dispose();
+    }
+  });
+
+  it('uses the component filename instead of angular:styles/component virtual URI in bundleInline warning locations', async () => {
+    const bundler = new ComponentStylesheetBundler(
+      {
+        workspaceRoot: tempRoot,
+        optimization: false,
+        inlineFonts: false,
+        sourcemap: false,
+        outputNames: { bundles: '[name]', media: 'media/[name]' },
+        target: ['es2022'],
+        cacheOptions: { enabled: false, path: '', basePath: tempRoot },
+      },
+      'css',
+      false,
+    );
+
+    const componentFile = join(tempRoot, 'src', 'lib', 'lib.component.ts');
+
+    try {
+      const result = await bundler.bundleInline('.box { color: red', componentFile);
+
+      expect(result.warnings.length).toBeGreaterThan(0);
+      expect(result.warnings[0].location?.file).toBe(componentFile);
+    } finally {
+      await bundler.dispose();
+    }
+  });
+});