fix(compiler): support styleUrl singular and safe template getter

- Merge `styleUrl` (Angular 17+) and `styleUrls` in getComponentStyleUrls
- Guard getComponentTemplate against non-string template references
- Update fixture to use styleUrl singular form
closes #1571

Author: vogloblinsky

src/app/compiler/angular/deps/helpers/component-helper.ts

@@ -251,7 +251,11 @@ export class ComponentHelper {
 
         const result = {
             required,
-            type: this.parseSignalType(signalType) ?? this.inferTypeFromValue(signalDefaultValue),
+            // For signals like input<OutputType, TransformType>(...), only the first
+            // type parameter is the signal's value type (issue #1571).
+            type:
+                this.parseSignalType(this.extractFirstTypeParam(signalType)) ??
+                this.inferTypeFromValue(signalDefaultValue),
             defaultValue: signalDefaultValue
         };
 
@@ -349,6 +353,34 @@ export class ComponentHelper {
         return -1;
     }
 
+    /**
+     * Extracts the first type parameter from a comma-separated generic type string.
+     * For Angular signals like `input<OutputType, TransformInputType>`, only the
+     * first type parameter is the signal's value type (issue #1571).
+     * For example:
+     *   "number, number"          → "number"
+     *   "string[], string | string[]" → "string[]"
+     *   "() => string[], () => string[]" → "() => string[]"
+     *   "string | number"         → "string | number" (no top-level comma)
+     */
+    private extractFirstTypeParam(typeStr: string): string {
+        if (!typeStr) return typeStr;
+        let depth = 0;
+        for (let i = 0; i < typeStr.length; i++) {
+            const ch = typeStr[i];
+            if (ch === '<' || ch === '(' || ch === '[' || ch === '{') {
+                depth++;
+            } else if (ch === '>' || ch === ')' || ch === ']' || ch === '}') {
+                // Skip '>' that is part of '=>' (arrow function syntax)
+                if (ch === '>' && i > 0 && typeStr[i - 1] === '=') continue;
+                depth--;
+            } else if (ch === ',' && depth === 0) {
+                return typeStr.slice(0, i).trim();
+            }
+        }
+        return typeStr;
+    }
+
     /**
      * Infers a primitive TypeScript type from a literal default value string.
      * Used as a fallback when no explicit type parameter is provided (e.g. `input(4)`).

test/fixtures/todomvc-ng2/src/app/about/compodoc/compodoc.component.ts

@@ -56,4 +56,9 @@ export class CompodocComponent {
     outputSignalWithStringType = output<'value'>();
     outputSignalWithMultipleTypes = output<string | number>();
     outputSignalWithMultipleMixedTypes = output<'asc' | 'dsc' | number>();
+
+    // issue #1571: input with two type params (output type + transform input type)
+    inputSignalWithTransform = input.required<number, number>({ transform: Number });
+    // issue #1571: input with union type default value
+    inputSignalWithUnionType = input<'left' | 'right'>('right');
 }

test/src/app/compiler/angular/deps/helpers/component-helper.spec.ts

@@ -312,23 +312,27 @@ describe('ComponentHelper', () => {
             // This case caused catastrophic backtracking in the old regex.
             // The options object { transform: ... } is the sole argument and must not
             // leak into defaultValue — it should be treated as the options object.
+            // The second type param is the transform input type; only the first (output) type
+            // is shown in documentation (issue #1571).
             const defaultValue = `input.required<string[], string | string[]>({ transform: v => (Array.isArray(v) ? v : [v]) })`;
             const result = componentHelper['getSignalConfig']('input', defaultValue);
 
             expect(result).to.deep.equal({
                 required: true,
-                type: 'string[], string | string[]',
+                type: 'string[]',
                 defaultValue: undefined
             });
         });
 
         it('should parse input signal with arrow function types containing => without hanging (issue #1654)', () => {
+            // The second type param is the transform input type; only the first (output) type
+            // is shown in documentation (issue #1571).
             const defaultValue = `input<() => string[], () => string[]>(() => [])`;
             const result = componentHelper['getSignalConfig']('input', defaultValue);
 
             expect(result).to.deep.equal({
                 required: false,
-                type: '() => string[], () => string[]',
+                type: '() => string[]',
                 defaultValue: '() => []'
             });
         });
@@ -476,6 +480,40 @@ describe('ComponentHelper', () => {
 
             expect(result).to.not.have.property('name');
         });
+
+        // Tests for issue #1571: signal with two type params (output type + transform input type)
+        it('should extract only the output type from input.required<T, U> with transform (issue #1571)', () => {
+            const defaultValue = `input.required<number, number>({ transform: numberAttribute })`;
+            const result = componentHelper['getSignalConfig']('input', defaultValue);
+
+            expect(result).to.deep.equal({
+                required: true,
+                type: 'number',
+                defaultValue: undefined
+            });
+        });
+
+        it('should extract only the output type from input<T, U> with transform and default (issue #1571)', () => {
+            const defaultValue = `input<string, string | null>('default', { transform: someTransform })`;
+            const result = componentHelper['getSignalConfig']('input', defaultValue);
+
+            expect(result).to.deep.equal({
+                required: false,
+                type: 'string',
+                defaultValue: "'default'"
+            });
+        });
+
+        it('should not split union types that are a single type param (issue #1571)', () => {
+            const defaultValue = `input<'left' | 'right'>('right')`;
+            const result = componentHelper['getSignalConfig']('input', defaultValue);
+
+            expect(result).to.deep.equal({
+                required: false,
+                type: '"left" | "right"',
+                defaultValue: "'right'"
+            });
+        });
     });
 
     describe('getInputSignal', () => {