From 2883fa3a6fbd8e45010e38414c77353102281e9f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Leosvel=20P=C3=A9rez=20Espinosa?= Date: Mon, 13 Nov 2023 15:22:37 +0100 Subject: [PATCH] feat(angular): update component generator to use a single string `styles` or `styleUrl` property (#20146) --- .../__snapshots__/application.spec.ts.snap | 12 +++--- .../ng-module/src/app/app.component.ts__tpl__ | 6 ++- .../src/app/app.component.ts__tpl__ | 6 ++- .../src/app/app.config.ts__tpl__ | 2 +- .../standalone-components/src/main.ts__tpl__ | 8 +--- .../application/lib/create-files.ts | 6 +-- .../__snapshots__/component.spec.ts.snap | 38 ++++++++++++------- .../generators/component/component.spec.ts | 37 ++++++++++++++++++ .../src/generators/component/component.ts | 10 ++--- .../component/files/__fileName__.ts__tpl__ | 10 ++++- .../host/__snapshots__/host.spec.ts.snap | 2 +- .../__snapshots__/library.spec.ts.snap | 18 ++++----- .../scam-to-standalone.spec.ts | 2 +- .../lib/convert-component-to-scam.spec.ts | 10 ++--- .../angular/src/generators/scam/scam.spec.ts | 6 +-- 15 files changed, 112 insertions(+), 61 deletions(-) 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) { %>

Welcome <%= appName %>

<% } else { %><<%= nxWelcomeSelector %>>><% } %> <% if(routing) { %><% } %>`,<% } %><% if(!inlineStyle) { %> + template: `<% if(minimal) { %>

Welcome <%= appName %>

<% } else { %><<%= nxWelcomeSelector %>>><% } %> <% if(routing) { %><% } %>`,<% } %><% 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) { %>

Welcome <%= appName %>

<% } else { %><<%= nxWelcomeSelector %>>><% } %> <% if(routing) { %><% } %>`,<% } %><% if(!inlineStyle) { %> + template: `<% if(minimal) { %>

Welcome <%= appName %>

<% } else { %><<%= nxWelcomeSelector %>>><% } %> <% if(routing) { %><% } %>`,<% } %><% 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: \`

example works!

\`, - 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: `

<%= name %> works!

`<% } 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: \`

my-lib works!

\`, - styles: [], + styles: \`\`, encapsulation: ViewEncapsulation.ShadowDom, changeDetection: ChangeDetectionStrategy.OnPush, }) @@ -185,7 +185,7 @@ import { CommonModule } from '@angular/common'; standalone: true, imports: [CommonModule], template: \`

my-lib works!

\`, - styles: [], + styles: \`\`, }) export class MyLibComponent {} " @@ -205,7 +205,7 @@ import { CommonModule } from '@angular/common'; standalone: true, imports: [CommonModule], template: \`

my-lib works!

\`, - 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 {}