refactor(@schematics/angular): update component schematic to use single style or styleUrl property

An array is no longer required in v17 and we always generate a single style or style URL anyways, so we may as well drop the array.

(cherry picked from commit 7b1fd9c)

Author: dgp1130

packages/schematics/angular/component/files/__name@dasherize@if-flat__/__name@dasherize__.__type@dasherize__.ts.template

@@ -11,14 +11,12 @@ import { CommonModule } from '@angular/common';<% } %>
     </p>
   `<% } else { %>
   templateUrl: './<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %>.html'<% } if(inlineStyle) { %>,
-  styles: [<% if(displayBlock){ %>
-    `
-      :host {
-        display: block;
-      }
-    `<% } %>
-  ]<% } else if (style !== 'none') { %>,
-  styleUrls: ['./<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %>.<%= style %>']<% } %><% if(!!viewEncapsulation) { %>,
+  styles: `<% if(displayBlock){ %>
+    :host {
+      display: block;
+    }
+  <% } %>`<% } else if (style !== 'none') { %>,
+  styleUrl: './<%= dasherize(name) %><%= type ? '.' + dasherize(type): '' %>.<%= style %>'<% } %><% if(!!viewEncapsulation) { %>,
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
 })

packages/schematics/angular/component/index_spec.ts

@@ -210,8 +210,8 @@ describe('Component Schematic', () => {
     const options = { ...defaultOptions, inlineStyle: true };
     const tree = await schematicRunner.runSchematic('component', options, appTree);
     const content = tree.readContent('/projects/bar/src/app/foo/foo.component.ts');
-    expect(content).toMatch(/styles: \[/);
-    expect(content).not.toMatch(/styleUrls: /);
+    expect(content).toMatch(/styles: `/);
+    expect(content).not.toMatch(/styleUrl: /);
     expect(tree.files).not.toContain('/projects/bar/src/app/foo/foo.component.css');
   });
 
@@ -247,7 +247,7 @@ describe('Component Schematic', () => {
     const options = { ...defaultOptions, style: Style.Sass };
     const tree = await schematicRunner.runSchematic('component', options, appTree);
     const content = tree.readContent('/projects/bar/src/app/foo/foo.component.ts');
-    expect(content).toMatch(/styleUrls: \['.\/foo.component.sass/);
+    expect(content).toMatch(/styleUrl: '.\/foo.component.sass/);
     expect(tree.files).toContain('/projects/bar/src/app/foo/foo.component.sass');
     expect(tree.files).not.toContain('/projects/bar/src/app/foo/foo.component.css');
   });