diff --git a/packages/angular/src/generators/component/lib/normalize-options.ts b/packages/angular/src/generators/component/lib/normalize-options.ts index eb1609b7b0..01ace8c9e2 100644 --- a/packages/angular/src/generators/component/lib/normalize-options.ts +++ b/packages/angular/src/generators/component/lib/normalize-options.ts @@ -24,6 +24,11 @@ export async function normalizeOptions( allowedFileExtensions: ['ts'], fileExtension: 'ts', }); + if (name.includes('/')) { + throw new Error( + `The component name '${name}' cannot contain a slash as it must be a valid JS symbol. Please use a different name.` + ); + } const { className } = names(name); const { className: suffixClassName } = names(options.type); 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 19a283b497..422ff3f9f3 100644 --- a/packages/angular/src/generators/library/__snapshots__/library.spec.ts.snap +++ b/packages/angular/src/generators/library/__snapshots__/library.spec.ts.snap @@ -146,7 +146,7 @@ import { CommonModule } from '@angular/common'; @Component({ selector: 'lib-my-lib', imports: [CommonModule], - template: \`
my-lib works!
\`, + template: \`MyLib works!
\`, styles: \`\`, encapsulation: ViewEncapsulation.ShadowDom, changeDetection: ChangeDetectionStrategy.OnPush @@ -164,7 +164,7 @@ import { CommonModule } from '@angular/common'; @Component({ selector: 'lib-my-lib', imports: [CommonModule], - template: \`my-lib works!
\`, + template: \`MyLib works!
\`, styles: \`\` }) export class MyLibComponent {} @@ -180,7 +180,7 @@ import { CommonModule } from '@angular/common'; @Component({ selector: 'lib-my-lib', imports: [CommonModule], - template: \`my-lib works!
\`, + template: \`MyLib works!
\`, styles: \`\` }) export class MyLibComponent {} @@ -421,6 +421,22 @@ describe('MyLibComponent', () => { " `; +exports[`lib --standalone should generate a library with a valid selector for the standalone component when library name has a slash 1`] = `"export * from './lib/auth/common/auth/common.component';"`; + +exports[`lib --standalone should generate a library with a valid selector for the standalone component when library name has a slash 2`] = ` +"import { Component } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +@Component({ + selector: 'lib-auth-common', + imports: [CommonModule], + templateUrl: './common.component.html', + styleUrl: './common.component.css' +}) +export class AuthCommonComponent {} +" +`; + exports[`lib router lazy should add RouterModule.forChild 1`] = ` "import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; diff --git a/packages/angular/src/generators/library/lib/add-standalone-component.ts b/packages/angular/src/generators/library/lib/add-standalone-component.ts index 0b538b82a2..dd1507f49e 100644 --- a/packages/angular/src/generators/library/lib/add-standalone-component.ts +++ b/packages/angular/src/generators/library/lib/add-standalone-component.ts @@ -1,4 +1,4 @@ -import { joinPathFragments, type Tree } from '@nx/devkit'; +import { joinPathFragments, names, type Tree } from '@nx/devkit'; import { componentGenerator } from '../../component/component'; import { addChildren } from './add-children'; import { addLoadChildren } from './add-load-children'; @@ -10,7 +10,7 @@ export async function addStandaloneComponent( ) { await componentGenerator(tree, { ...componentOptions, - name: componentOptions.name, + name: names(libraryOptions.name).className, path: joinPathFragments( libraryOptions.projectRoot, 'src', diff --git a/packages/angular/src/generators/library/library.spec.ts b/packages/angular/src/generators/library/library.spec.ts index b49e802c81..f7a6449628 100644 --- a/packages/angular/src/generators/library/library.spec.ts +++ b/packages/angular/src/generators/library/library.spec.ts @@ -1491,6 +1491,21 @@ describe('lib', () => { ).toMatchSnapshot(); }); + it('should generate a library with a valid selector for the standalone component when library name has a slash', async () => { + await runLibraryGeneratorWithOpts({ + standalone: true, + name: 'auth/common', + }); + + expect(tree.read('my-lib/src/index.ts', 'utf-8')).toMatchSnapshot(); + expect( + tree.read( + 'my-lib/src/lib/auth/common/auth/common.component.ts', + 'utf-8' + ) + ).toMatchSnapshot(); + }); + it('should generate a library with a standalone component and have it flat', async () => { await runLibraryGeneratorWithOpts({ standalone: true, flat: true });