fix(@schematics/angular): use styleUrl

The `ng g c` schematic is already using `styleUrl`, but `app.component.ts` was still using `styleUrls`.

Author: cexbrayat

packages/schematics/angular/application/files/module-files/src/app/app.component.ts.template

@@ -11,7 +11,7 @@ import { Component } from '@angular/core';
   `,<% } else { %>
   templateUrl: './app.component.html',<% } if(inlineStyle) { %>
   styles: []<% } else { %>
-  styleUrls: ['./app.component.<%= style %>']<% } %>
+  styleUrl: './app.component.<%= style %>'<% } %>
 })
 export class AppComponent {
   title = '<%= name %>';

packages/schematics/angular/application/files/standalone-files/src/app/app.component.ts.template

@@ -15,7 +15,7 @@ import { RouterOutlet } from '@angular/router';<% } %>
   `,<% } else { %>
   templateUrl: './app.component.html',<% } if(inlineStyle) { %>
   styles: [],<% } else { %>
-  styleUrls: ['./app.component.<%= style %>']<% } %>
+  styleUrl: './app.component.<%= style %>'<% } %>
 })
 export class AppComponent {
   title = '<%= name %>';

tests/legacy-cli/e2e/tests/build/styles/include-paths.ts

@@ -27,8 +27,8 @@ export default async function () {
 
   await replaceInFile(
     'src/app/app.component.ts',
-    `'./app.component.css\'`,
-    `'./app.component.scss', './app.component.less'`,
+    `styleUrl: './app.component.css\'`,
+    `styleUrls: ['./app.component.scss', './app.component.less']`,
   );
 
   await updateJsonFile('angular.json', (workspaceJson) => {