diff --git a/packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap b/packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap
index 72cc77007c42f..f082cff7abafc 100644
--- a/packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap
+++ b/packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap
@@ -23,7 +23,7 @@ exports[`app --minimal should skip "nx-welcome.component.ts" file and references
 @Component({
   selector: 'proj-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  styleUrl: './app.component.css',
 })
 export class AppComponent {}
 "
@@ -81,7 +81,7 @@ exports[`app --minimal should skip "nx-welcome.component.ts" file and references
 @Component({
   selector: 'proj-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  styleUrl: './app.component.css',
 })
 export class AppComponent {}
 "
@@ -125,7 +125,7 @@ import { RouterModule } from '@angular/router';
   imports: [RouterModule],
   selector: 'proj-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  styleUrl: './app.component.css',
 })
 export class AppComponent {}
 "
@@ -169,7 +169,7 @@ exports[`app --minimal should skip "nx-welcome.component.ts" file and references
   imports: [],
   selector: 'proj-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  styleUrl: './app.component.css',
 })
 export class AppComponent {}
 "
@@ -714,7 +714,7 @@ import { NxWelcomeComponent } from './nx-welcome.component';
   imports: [NxWelcomeComponent, RouterModule],
   selector: 'proj-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  styleUrl: './app.component.css',
 })
 export class AppComponent {
   title = 'standalone';
@@ -782,7 +782,7 @@ import { NxWelcomeComponent } from './nx-welcome.component';
   imports: [NxWelcomeComponent],
   selector: 'proj-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  styleUrl: './app.component.css',
 })
 export class AppComponent {
   title = 'standalone';
diff --git a/packages/angular/src/generators/application/files/ng-module/src/app/app.component.ts__tpl__ b/packages/angular/src/generators/application/files/ng-module/src/app/app.component.ts__tpl__
index b3a4d22470b14..e8b42f0f4f32f 100644
--- a/packages/angular/src/generators/application/files/ng-module/src/app/app.component.ts__tpl__
+++ b/packages/angular/src/generators/application/files/ng-module/src/app/app.component.ts__tpl__
@@ -3,9 +3,11 @@ import { Component<% if(viewEncapsulation) { %>, ViewEncapsulation<% } %> } from
 @Component({
   selector: '<%= rootSelector %>',<% if(!inlineTemplate) { %>
   templateUrl: './app.component.html',<% } else { %>
-  template: `<% if(minimal) { %><h1>Welcome <%= appName %></h1><% } else { %><<%= nxWelcomeSelector %>></<%= nxWelcomeSelector %>><% } %> <% if(routing) { %><router-outlet></router-outlet><% } %>`,<% } %><% if(!inlineStyle) { %>
+  template: `<% if(minimal) { %><h1>Welcome <%= appName %></h1><% } else { %><<%= nxWelcomeSelector %>></<%= nxWelcomeSelector %>><% } %> <% if(routing) { %><router-outlet></router-outlet><% } %>`,<% } %><% if (angularMajorVersion < 17) { if(!inlineStyle) { %>
   styleUrls: ['./app.component.<%= style %>'],<% } else { %>
-  styles: [''],<% } %><% if(viewEncapsulation) { %>
+  styles: [``],<% } %><% } else { if(!inlineStyle) { %>
+  styleUrl: './app.component.<%= style %>',<% } else { %>
+  styles: ``,<% } %><% } %><% if(viewEncapsulation) { %>
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %>,<% } %>
 })
 export class AppComponent {<% if(!minimal) { %>
diff --git a/packages/angular/src/generators/application/files/standalone-components/src/app/app.component.ts__tpl__ b/packages/angular/src/generators/application/files/standalone-components/src/app/app.component.ts__tpl__
index 5b3eb1eccabad..67e2cbd0cb449 100644
--- a/packages/angular/src/generators/application/files/standalone-components/src/app/app.component.ts__tpl__
+++ b/packages/angular/src/generators/application/files/standalone-components/src/app/app.component.ts__tpl__
@@ -7,9 +7,11 @@ import { NxWelcomeComponent } from './nx-welcome.component';<% } %>
   imports: [<% if(!minimal) { %>NxWelcomeComponent, <% } %><% if(routing) { %>RouterModule<% } %>],
   selector: '<%= rootSelector %>',<% if(!inlineTemplate) { %>
   templateUrl: './app.component.html',<% } else { %>
-  template: `<% if(minimal) { %><h1>Welcome <%= appName %></h1><% } else { %><<%= nxWelcomeSelector %>></<%= nxWelcomeSelector %>><% } %> <% if(routing) { %><router-outlet></router-outlet><% } %>`,<% } %><% if(!inlineStyle) { %>
+  template: `<% if(minimal) { %><h1>Welcome <%= appName %></h1><% } else { %><<%= nxWelcomeSelector %>></<%= nxWelcomeSelector %>><% } %> <% if(routing) { %><router-outlet></router-outlet><% } %>`,<% } %><% if (angularMajorVersion < 17) { if(!inlineStyle) { %>
   styleUrls: ['./app.component.<%= style %>'],<% } else { %>
-  styles: [''],<% } %><% if(viewEncapsulation) { %>
+  styles: [``],<% } %><% } else { if(!inlineStyle) { %>
+  styleUrl: './app.component.<%= style %>',<% } else { %>
+  styles: ``,<% } %><% } %><% if(viewEncapsulation) { %>
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %>,<% } %>
 })
 export class AppComponent {<% if(!minimal) { %>
diff --git a/packages/angular/src/generators/application/files/standalone-components/src/app/app.config.ts__tpl__ b/packages/angular/src/generators/application/files/standalone-components/src/app/app.config.ts__tpl__
index 37ff93aee71e4..aba1bdf1c7def 100644
--- a/packages/angular/src/generators/application/files/standalone-components/src/app/app.config.ts__tpl__
+++ b/packages/angular/src/generators/application/files/standalone-components/src/app/app.config.ts__tpl__
@@ -1,4 +1,4 @@
-import { ApplicationConfig } from <% if (installedAngularInfo.major >= 16) { %>'@angular/core';<% } else { %>'@angular/platform-browser';<% } %><% if (routing) { %>
+import { ApplicationConfig } from <% if (angularMajorVersion >= 16) { %>'@angular/core';<% } else { %>'@angular/platform-browser';<% } %><% if (routing) { %>
 import { provideRouter } from '@angular/router';
 import { appRoutes } from './app.routes';<% } %>
 
diff --git a/packages/angular/src/generators/application/files/standalone-components/src/main.ts__tpl__ b/packages/angular/src/generators/application/files/standalone-components/src/main.ts__tpl__
index 8c4643d25772f..17447a5dce2c4 100644
--- a/packages/angular/src/generators/application/files/standalone-components/src/main.ts__tpl__
+++ b/packages/angular/src/generators/application/files/standalone-components/src/main.ts__tpl__
@@ -1,11 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
-import { AppComponent } from './app/app.component';<% if(installedAngularInfo.major === 14) { %>
-import { enableProdMode } from '@angular/core';
-import { environment } from './environments/environment';
-
-if(environment.production) {
-  enableProdMode();
-}<% } %>
+import { AppComponent } from './app/app.component';
 
 bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
diff --git a/packages/angular/src/generators/application/lib/create-files.ts b/packages/angular/src/generators/application/lib/create-files.ts
index 0379dad1caf95..8bc45d738179a 100644
--- a/packages/angular/src/generators/application/lib/create-files.ts
+++ b/packages/angular/src/generators/application/lib/create-files.ts
@@ -11,9 +11,9 @@ export async function createFiles(
   options: NormalizedSchema,
   rootOffset: string
 ) {
-  const installedAngularInfo = getInstalledAngularVersionInfo(tree);
+  const { major: angularMajorVersion } = getInstalledAngularVersionInfo(tree);
   const isUsingApplicationBuilder =
-    installedAngularInfo.major >= 17 && options.bundler === 'esbuild';
+    angularMajorVersion >= 17 && options.bundler === 'esbuild';
 
   const substitutions = {
     rootSelector: `${options.prefix}-root`,
@@ -27,7 +27,7 @@ export async function createFiles(
     minimal: options.minimal,
     nxWelcomeSelector: `${options.prefix}-nx-welcome`,
     rootTsConfig: joinPathFragments(rootOffset, getRootTsConfigFileName(tree)),
-    installedAngularInfo,
+    angularMajorVersion,
     rootOffset,
     isUsingApplicationBuilder,
     tpl: '',
diff --git a/packages/angular/src/generators/component/__snapshots__/component.spec.ts.snap b/packages/angular/src/generators/component/__snapshots__/component.spec.ts.snap
index 91b46b3b15688..e5140f08722ac 100644
--- a/packages/angular/src/generators/component/__snapshots__/component.spec.ts.snap
+++ b/packages/angular/src/generators/component/__snapshots__/component.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`component Generator --flat should create the component correctly and ex
 @Component({
   selector: 'proj-example',
   templateUrl: './example.component.html',
-  styleUrls: ['./example.component.css'],
+  styleUrl: './example.component.css',
 })
 export class ExampleComponent {}
 "
@@ -18,7 +18,7 @@ exports[`component Generator --flat should create the component correctly and no
 @Component({
   selector: 'proj-example',
   templateUrl: './example.component.html',
-  styleUrls: ['./example.component.css'],
+  styleUrl: './example.component.css',
 })
 export class ExampleComponent {}
 "
@@ -42,7 +42,19 @@ exports[`component Generator --path should create the component correctly and ex
 @Component({
   selector: 'proj-example',
   templateUrl: './example.component.html',
-  styleUrls: ['./example.component.css'],
+  styleUrl: './example.component.css',
+})
+export class ExampleComponent {}
+"
+`;
+
+exports[`component Generator compat should inline styles when --inline-style=true 1`] = `
+"import { Component } from '@angular/core';
+
+@Component({
+  selector: 'proj-example',
+  templateUrl: './example.component.html',
+  styles: \`\`,
 })
 export class ExampleComponent {}
 "
@@ -54,7 +66,7 @@ exports[`component Generator secondary entry points should create the component
 @Component({
   selector: 'proj-example',
   templateUrl: './example.component.html',
-  styleUrls: ['./example.component.css'],
+  styleUrl: './example.component.css',
 })
 export class ExampleComponent {}
 "
@@ -72,7 +84,7 @@ exports[`component Generator should create component files correctly: component
 @Component({
   selector: 'proj-example',
   templateUrl: './example.component.html',
-  styleUrls: ['./example.component.css'],
+  styleUrl: './example.component.css',
 })
 export class ExampleComponent {}
 "
@@ -121,7 +133,7 @@ exports[`component Generator should create the component correctly and export it
 @Component({
   selector: 'proj-example',
   templateUrl: './example.component.html',
-  styleUrls: ['./example.component.css'],
+  styleUrl: './example.component.css',
 })
 export class ExampleComponent {}
 "
@@ -142,7 +154,7 @@ import { CommonModule } from '@angular/common';
   standalone: true,
   imports: [CommonModule],
   templateUrl: './example.component.html',
-  styleUrls: ['./example.component.css'],
+  styleUrl: './example.component.css',
 })
 export class ExampleComponent {}
 "
@@ -154,7 +166,7 @@ exports[`component Generator should create the component correctly and not expor
 @Component({
   selector: 'proj-example',
   templateUrl: './example.component.html',
-  styleUrls: ['./example.component.css'],
+  styleUrl: './example.component.css',
 })
 export class ExampleComponent {}
 "
@@ -169,7 +181,7 @@ import { CommonModule } from '@angular/common';
   standalone: true,
   imports: [CommonModule],
   templateUrl: './example.component.html',
-  styleUrls: ['./example.component.css'],
+  styleUrl: './example.component.css',
 })
 export class ExampleComponent {}
 "
@@ -181,7 +193,7 @@ exports[`component Generator should create the component correctly and not expor
 @Component({
   selector: 'proj-example',
   templateUrl: './example.component.html',
-  styleUrls: ['./example.component.css'],
+  styleUrl: './example.component.css',
 })
 export class ExampleComponent {}
 "
@@ -193,7 +205,7 @@ exports[`component Generator should create the component correctly but not expor
 @Component({
   selector: 'proj-example',
   templateUrl: './example.component.html',
-  styleUrls: ['./example.component.css'],
+  styleUrl: './example.component.css',
 })
 export class ExampleComponent {}
 "
@@ -205,7 +217,7 @@ exports[`component Generator should inline styles when --inline-style=true 1`] =
 @Component({
   selector: 'proj-example',
   templateUrl: './example.component.html',
-  styles: [],
+  styles: \`\`,
 })
 export class ExampleComponent {}
 "
@@ -217,7 +229,7 @@ exports[`component Generator should inline template when --inline-template=true
 @Component({
   selector: 'proj-example',
   template: \`<p>example works!</p>\`,
-  styleUrls: ['./example.component.css'],
+  styleUrl: './example.component.css',
 })
 export class ExampleComponent {}
 "
diff --git a/packages/angular/src/generators/component/component.spec.ts b/packages/angular/src/generators/component/component.spec.ts
index d1968c4402273..3600967aa78b2 100644
--- a/packages/angular/src/generators/component/component.spec.ts
+++ b/packages/angular/src/generators/component/component.spec.ts
@@ -985,4 +985,41 @@ describe('component Generator', () => {
       expect(indexSource).toBe('');
     });
   });
+
+  describe('compat', () => {
+    it('should inline styles when --inline-style=true', async () => {
+      const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+      addProjectConfiguration(tree, 'lib1', {
+        projectType: 'library',
+        sourceRoot: 'libs/lib1/src',
+        root: 'libs/lib1',
+      });
+      tree.write(
+        'libs/lib1/src/lib/lib.module.ts',
+        `
+      import { NgModule } from '@angular/core';
+      
+      @NgModule({
+        declarations: [],
+        exports: []
+      })
+      export class LibModule {}`
+      );
+      tree.write('libs/lib1/src/index.ts', '');
+
+      await componentGenerator(tree, {
+        name: 'example',
+        project: 'lib1',
+        inlineStyle: true,
+        standalone: false,
+      });
+
+      expect(
+        tree.read('libs/lib1/src/lib/example/example.component.ts', 'utf-8')
+      ).toMatchSnapshot();
+      expect(
+        tree.exists('libs/lib1/src/lib/example/example.component.css')
+      ).toBe(false);
+    });
+  });
 });
diff --git a/packages/angular/src/generators/component/component.ts b/packages/angular/src/generators/component/component.ts
index a6ff38ce1ba0e..df8a99a21a447 100644
--- a/packages/angular/src/generators/component/component.ts
+++ b/packages/angular/src/generators/component/component.ts
@@ -1,11 +1,7 @@
 import type { Tree } from '@nx/devkit';
-import {
-  formatFiles,
-  generateFiles,
-  joinPathFragments,
-  names,
-} from '@nx/devkit';
+import { formatFiles, generateFiles, joinPathFragments } from '@nx/devkit';
 import { addToNgModule } from '../utils';
+import { getInstalledAngularVersionInfo } from '../utils/version-utils';
 import {
   exportComponentInEntryPoint,
   findModuleFromOptions,
@@ -26,6 +22,7 @@ export async function componentGeneratorInternal(
 ) {
   const options = await normalizeOptions(tree, rawOptions);
 
+  const { major: angularMajorVersion } = getInstalledAngularVersionInfo(tree);
   generateFiles(
     tree,
     joinPathFragments(__dirname, 'files'),
@@ -43,6 +40,7 @@ export async function componentGeneratorInternal(
       viewEncapsulation: options.viewEncapsulation,
       displayBlock: options.displayBlock,
       selector: options.selector,
+      angularMajorVersion,
       tpl: '',
     }
   );
diff --git a/packages/angular/src/generators/component/files/__fileName__.ts__tpl__ b/packages/angular/src/generators/component/files/__fileName__.ts__tpl__
index a5e19026fff95..cbe0d9c59c253 100644
--- a/packages/angular/src/generators/component/files/__fileName__.ts__tpl__
+++ b/packages/angular/src/generators/component/files/__fileName__.ts__tpl__
@@ -6,7 +6,7 @@ import { CommonModule } from '@angular/common';<% } %>
   standalone: true,
   imports: [CommonModule],<%}%><% if(inlineTemplate) { %>
   template: `<p><%= name %> works!</p>`<% } else { %>
-  templateUrl: './<%= fileName %>.html'<% } if(inlineStyle) { %>,
+  templateUrl: './<%= fileName %>.html'<% } if (angularMajorVersion < 17) { if(inlineStyle) { %>,
   styles: [<% if(displayBlock){ %>
     `
       :host {
@@ -14,7 +14,13 @@ import { CommonModule } from '@angular/common';<% } %>
       }
     `<% } %>
   ]<% } else if (style !== 'none') { %>,
-  styleUrls: ['./<%= fileName %>.<%= style %>']<% } %><% if(!!viewEncapsulation) { %>,
+  styleUrls: ['./<%= fileName %>.<%= style %>']<% } %><% } else { if(inlineStyle) { %>,
+  styles: `<% if(displayBlock){ %>
+    :host {
+      display: block;
+    }
+  <% } %>`<% } else if (style !== 'none') { %>,
+  styleUrl: './<%= fileName %>.<%= style %>'<% } %><% } %><% if(!!viewEncapsulation) { %>,
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %><% } if (changeDetection !== 'Default') { %>,
   changeDetection: ChangeDetectionStrategy.<%= changeDetection %><% } %>
 })
diff --git a/packages/angular/src/generators/host/__snapshots__/host.spec.ts.snap b/packages/angular/src/generators/host/__snapshots__/host.spec.ts.snap
index 30e904136e3de..c2243fd20ee76 100644
--- a/packages/angular/src/generators/host/__snapshots__/host.spec.ts.snap
+++ b/packages/angular/src/generators/host/__snapshots__/host.spec.ts.snap
@@ -916,7 +916,7 @@ import { NxWelcomeComponent } from './nx-welcome.component';
   imports: [NxWelcomeComponent, RouterModule],
   selector: 'proj-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  styleUrl: './app.component.css',
 })
 export class AppComponent {
   title = 'host';
diff --git a/packages/angular/src/generators/library/__snapshots__/library.spec.ts.snap b/packages/angular/src/generators/library/__snapshots__/library.spec.ts.snap
index f5d052c4c9e80..c636621ed5c49 100644
--- a/packages/angular/src/generators/library/__snapshots__/library.spec.ts.snap
+++ b/packages/angular/src/generators/library/__snapshots__/library.spec.ts.snap
@@ -14,7 +14,7 @@ import { CommonModule } from '@angular/common';
   standalone: true,
   imports: [CommonModule],
   templateUrl: './my-lib.component.html',
-  styleUrls: ['./my-lib.component.css'],
+  styleUrl: './my-lib.component.css',
 })
 export class MyLibComponent {}
 "
@@ -61,7 +61,7 @@ import { CommonModule } from '@angular/common';
   standalone: true,
   imports: [CommonModule],
   templateUrl: './my-lib.component.html',
-  styleUrls: ['./my-lib.component.css'],
+  styleUrl: './my-lib.component.css',
 })
 export class MyLibComponent {}
 "
@@ -114,7 +114,7 @@ import { CommonModule } from '@angular/common';
   standalone: true,
   imports: [CommonModule],
   templateUrl: './my-lib.component.html',
-  styleUrls: ['./my-lib.component.css'],
+  styleUrl: './my-lib.component.css',
 })
 export class MyLibComponent {}
 "
@@ -163,7 +163,7 @@ import { CommonModule } from '@angular/common';
   standalone: true,
   imports: [CommonModule],
   template: \`<p>my-lib works!</p>\`,
-  styles: [],
+  styles: \`\`,
   encapsulation: ViewEncapsulation.ShadowDom,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -185,7 +185,7 @@ import { CommonModule } from '@angular/common';
   standalone: true,
   imports: [CommonModule],
   template: \`<p>my-lib works!</p>\`,
-  styles: [],
+  styles: \`\`,
 })
 export class MyLibComponent {}
 "
@@ -205,7 +205,7 @@ import { CommonModule } from '@angular/common';
   standalone: true,
   imports: [CommonModule],
   template: \`<p>my-lib works!</p>\`,
-  styles: [],
+  styles: \`\`,
 })
 export class MyLibComponent {}
 "
@@ -260,7 +260,7 @@ import { CommonModule } from '@angular/common';
   standalone: true,
   imports: [CommonModule],
   templateUrl: './my-lib.component.html',
-  styleUrls: ['./my-lib.component.css'],
+  styleUrl: './my-lib.component.css',
 })
 export class MyLibComponent {}
 "
@@ -381,7 +381,7 @@ import { CommonModule } from '@angular/common';
   standalone: true,
   imports: [CommonModule],
   templateUrl: './my-lib.component.html',
-  styleUrls: ['./my-lib.component.css'],
+  styleUrl: './my-lib.component.css',
 })
 export class MyLibComponent {}
 "
@@ -426,7 +426,7 @@ import { CommonModule } from '@angular/common';
   standalone: true,
   imports: [CommonModule],
   templateUrl: './my-lib.component.html',
-  styleUrls: ['./my-lib.component.css'],
+  styleUrl: './my-lib.component.css',
 })
 export class MyLibComponent {}
 "
diff --git a/packages/angular/src/generators/scam-to-standalone/scam-to-standalone.spec.ts b/packages/angular/src/generators/scam-to-standalone/scam-to-standalone.spec.ts
index 2b318d1d0b8fa..fed90cae7c69d 100644
--- a/packages/angular/src/generators/scam-to-standalone/scam-to-standalone.spec.ts
+++ b/packages/angular/src/generators/scam-to-standalone/scam-to-standalone.spec.ts
@@ -34,7 +34,7 @@ describe('scam-to-standalone', () => {
         imports: [CommonModule],
         selector: 'proj-bar',
         templateUrl: './bar.component.html',
-        styleUrls: ['./bar.component.css'],
+        styleUrl: './bar.component.css',
       })
       export class BarComponent {}
       "
diff --git a/packages/angular/src/generators/scam/lib/convert-component-to-scam.spec.ts b/packages/angular/src/generators/scam/lib/convert-component-to-scam.spec.ts
index f2c9966b14426..c5e2a71869f5a 100644
--- a/packages/angular/src/generators/scam/lib/convert-component-to-scam.spec.ts
+++ b/packages/angular/src/generators/scam/lib/convert-component-to-scam.spec.ts
@@ -46,7 +46,7 @@ describe('convertComponentToScam', () => {
       @Component({
         selector: 'proj-example',
         templateUrl: './example.component.html',
-        styleUrls: ['./example.component.css'],
+        styleUrl: './example.component.css',
       })
       export class ExampleComponent {}
 
@@ -152,7 +152,7 @@ describe('convertComponentToScam', () => {
       @Component({
         selector: 'proj-example',
         templateUrl: './example.component.html',
-        styleUrls: ['./example.component.css'],
+        styleUrl: './example.component.css',
       })
       export class ExampleComponent {}
 
@@ -262,7 +262,7 @@ describe('convertComponentToScam', () => {
       @Component({
         selector: 'proj-example',
         templateUrl: './example.random.html',
-        styleUrls: ['./example.random.css'],
+        styleUrl: './example.random.css',
       })
       export class ExampleRandom {}
 
@@ -373,7 +373,7 @@ describe('convertComponentToScam', () => {
       @Component({
         selector: 'proj-example',
         templateUrl: './example.component.html',
-        styleUrls: ['./example.component.css'],
+        styleUrl: './example.component.css',
       })
       export class ExampleComponent {}
 
@@ -431,7 +431,7 @@ describe('convertComponentToScam', () => {
       @Component({
         selector: 'proj-example',
         templateUrl: './example.component.html',
-        styleUrls: ['./example.component.css'],
+        styleUrl: './example.component.css',
       })
       export class ExampleComponent {}
 
diff --git a/packages/angular/src/generators/scam/scam.spec.ts b/packages/angular/src/generators/scam/scam.spec.ts
index 43c931dc3b233..d7bcbb6b123e4 100644
--- a/packages/angular/src/generators/scam/scam.spec.ts
+++ b/packages/angular/src/generators/scam/scam.spec.ts
@@ -31,7 +31,7 @@ describe('SCAM Generator', () => {
       @Component({
         selector: 'proj-example',
         templateUrl: './example.component.html',
-        styleUrls: ['./example.component.css'],
+        styleUrl: './example.component.css',
       })
       export class ExampleComponent {}
 
@@ -162,7 +162,7 @@ describe('SCAM Generator', () => {
         @Component({
           selector: 'proj-example',
           templateUrl: './example.component.html',
-          styleUrls: ['./example.component.css'],
+          styleUrl: './example.component.css',
         })
         export class ExampleComponent {}
 
@@ -205,7 +205,7 @@ describe('SCAM Generator', () => {
         @Component({
           selector: 'proj-example',
           templateUrl: './example.component.html',
-          styleUrls: ['./example.component.css'],
+          styleUrl: './example.component.css',
         })
         export class ExampleComponent {}