fix(@ngtools/webpack): extend non-string literal validation to styleUrls and styleUrl

Apply the same diagnostic thrown for non-string-literal templateUrl values to
styleUrls array elements and styleUrl (singular), and use a template literal for
the templateUrl error message.

Author: maruthang

packages/ngtools/webpack/src/transformers/replace_resources.ts

@@ -171,9 +171,9 @@ function visitComponentMetadata(
         const { line } = sourceFile.getLineAndCharacterOfPosition(node.initializer.getStart());
 
         throw new Error(
-          `Component '${className}' in '${sourceFile.fileName}' contains a non-string literal ` +
-            `'templateUrl' value at line ${line + 1}. The 'templateUrl' property must be a ` +
-            `string literal. Expressions, variables, or other dynamic values are not supported.`,
+          `Component '${className}' in '${sourceFile.fileName}' contains a non-string literal` +
+            ` 'templateUrl' value at line ${line + 1}. The 'templateUrl' property must be a` +
+            ` string literal. Expressions, variables, or other dynamic values are not supported.`,
         );
       }
 
@@ -211,6 +211,22 @@ function visitComponentMetadata(
           ) as ts.StringLiteralLike,
         ];
       } else if (ts.isArrayLiteralExpression(node.initializer)) {
+        if (!isInlineStyle) {
+          // Validate each element is a string literal for styleUrls
+          for (const element of node.initializer.elements) {
+            if (!ts.isStringLiteralLike(element)) {
+              const sourceFile = node.getSourceFile();
+              const { line } = sourceFile.getLineAndCharacterOfPosition(element.getStart());
+
+              throw new Error(
+                `Component '${className}' in '${sourceFile.fileName}' contains a non-string` +
+                  ` literal '${name}' value at line ${line + 1}. The '${name}' property must` +
+                  ` contain string literals. Expressions, variables, or other dynamic values` +
+                  ` are not supported.`,
+              );
+            }
+          }
+        }
         styles = ts.visitNodes(node.initializer.elements, (node) =>
           transformInlineStyleLiteral(
             node,
@@ -221,6 +237,16 @@ function visitComponentMetadata(
             moduleKind,
           ),
         ) as ts.NodeArray<ts.Expression>;
+      } else if (!isInlineStyle) {
+        // styleUrl or styleUrls with a non-string, non-array initializer
+        const sourceFile = node.getSourceFile();
+        const { line } = sourceFile.getLineAndCharacterOfPosition(node.initializer.getStart());
+
+        throw new Error(
+          `Component '${className}' in '${sourceFile.fileName}' contains a non-string literal` +
+            ` '${name}' value at line ${line + 1}. The '${name}' property must be a` +
+            ` string literal. Expressions, variables, or other dynamic values are not supported.`,
+        );
       } else {
         return node;
       }

packages/ngtools/webpack/src/transformers/replace_resources_spec.ts

@@ -511,4 +511,84 @@ describe('find_resources', () => {
       /Component 'AppComponent'.*contains a non-string literal 'templateUrl' value/,
     );
   });
+
+  it('should throw an error when styleUrls contains a conditional expression', () => {
+    const input = tags.stripIndent`
+        import { Component } from '@angular/core';
+
+        @Component({
+          selector: 'app-root',
+          templateUrl: './app.component.html',
+          styleUrls: [true === true ? './app.component.css' : './app.component.dark.css']
+        })
+        export class AppComponent {
+          title = 'app';
+        }
+      `;
+
+    expect(() => transform(input)).toThrowError(
+      /Component 'AppComponent'.*contains a non-string literal 'styleUrls' value/,
+    );
+  });
+
+  it('should throw an error when styleUrls contains a variable reference', () => {
+    const input = tags.stripIndent`
+        import { Component } from '@angular/core';
+
+        const myStyle = './app.component.css';
+
+        @Component({
+          selector: 'app-root',
+          templateUrl: './app.component.html',
+          styleUrls: [myStyle]
+        })
+        export class AppComponent {
+          title = 'app';
+        }
+      `;
+
+    expect(() => transform(input)).toThrowError(
+      /Component 'AppComponent'.*contains a non-string literal 'styleUrls' value/,
+    );
+  });
+
+  it('should throw an error when styleUrl is a conditional expression', () => {
+    const input = tags.stripIndent`
+        import { Component } from '@angular/core';
+
+        @Component({
+          selector: 'app-root',
+          templateUrl: './app.component.html',
+          styleUrl: true === true ? './app.component.css' : './app.component.dark.css'
+        })
+        export class AppComponent {
+          title = 'app';
+        }
+      `;
+
+    expect(() => transform(input)).toThrowError(
+      /Component 'AppComponent'.*contains a non-string literal 'styleUrl' value/,
+    );
+  });
+
+  it('should throw an error when styleUrl is a variable reference', () => {
+    const input = tags.stripIndent`
+        import { Component } from '@angular/core';
+
+        const myStyle = './app.component.css';
+
+        @Component({
+          selector: 'app-root',
+          templateUrl: './app.component.html',
+          styleUrl: myStyle
+        })
+        export class AppComponent {
+          title = 'app';
+        }
+      `;
+
+    expect(() => transform(input)).toThrowError(
+      /Component 'AppComponent'.*contains a non-string literal 'styleUrl' value/,
+    );
+  });
 });