fix(@angular/build): show clear error when styleUrl points to a TypeScript file

packages/angular/build/src/builders/application/tests/behavior/component-stylesheets_spec.ts

@@ -64,6 +64,25 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
       );
     });
 
+    it('should generate an error when a styleUrl points to a TypeScript file', async () => {
+      await harness.modifyFile('src/app/app.component.ts', (content) => {
+        return content.replace('./app.component.css', './app.component.ts');
+      });
+
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+      });
+
+      const { result, logs } = await harness.executeOnce({ outputLogsOnFailure: false });
+      expect(result?.success).toBeFalse();
+      expect(logs).toContain(
+        jasmine.objectContaining({
+          level: 'error',
+          message: jasmine.stringContaining(`Could not find stylesheet file './app.component.ts'`),
+        }),
+      );
+    });
+
     it('should generate an error for a missing stylesheet with JIT', async () => {
       await harness.modifyFile('src/app/app.component.ts', (content) => {
         return content.replace('./app.component.css', './not-present.css');

packages/angular/build/src/tools/angular/angular-host.ts

@@ -212,6 +212,12 @@ export function createAngularCompilerHost(
       return null;
     }
 
+    // Reject TypeScript files used as component resources (e.g., styleUrl pointing to a .ts file).
+    // Processing a TypeScript file as a stylesheet or template causes confusing downstream errors.
+    if (hasTypeScriptExtension(resolvedPath)) {
+      return null;
+    }
+
     // All resource names that have template file extensions are assumed to be templates
     // TODO: Update compiler to provide the resource type to avoid extension matching here.
     if (!hostOptions.externalStylesheets || hasTemplateExtension(resolvedPath)) {
@@ -255,15 +261,13 @@ export function createAngularCompilerHost(
   return host;
 }
 
-function hasTemplateExtension(file: string): boolean {
-  const extension = nodePath.extname(file).toLowerCase();
+const TEMPLATE_EXTENSIONS: ReadonlySet<string> = new Set(['.htm', '.html', '.svg']);
+const TYPESCRIPT_EXTENSIONS: ReadonlySet<string> = new Set(['.ts', '.tsx', '.mts', '.cts']);
 
-  switch (extension) {
-    case '.htm':
-    case '.html':
-    case '.svg':
-      return true;
-  }
+function hasTemplateExtension(file: string): boolean {
+  return TEMPLATE_EXTENSIONS.has(nodePath.extname(file).toLowerCase());
+}
 
-  return false;
+function hasTypeScriptExtension(file: string): boolean {
+  return TYPESCRIPT_EXTENSIONS.has(nodePath.extname(file).toLowerCase());
 }