feat(angular): update component generator to use a single string `sty…

…les` or `styleUrl` property (#20146)

(cherry picked from commit 2883fa3)

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';

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) { %>

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) { %>

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';<% } %>
 

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));

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: '',

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 {}
 "

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);
+    });
+  });
 });

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: '',
     }
   );

packages/angular/src/generators/component/files/__fileName__.ts__tpl__

@@ -6,15 +6,21 @@ 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 {
         display: block;
       }
     `<% } %>
   ]<% } 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 %><% } %>
 })

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';