diff --git a/packages/schematics/angular/component/index_spec.ts b/packages/schematics/angular/component/index_spec.ts index 29bc799420fd..124508b37c44 100644 --- a/packages/schematics/angular/component/index_spec.ts +++ b/packages/schematics/angular/component/index_spec.ts @@ -157,6 +157,30 @@ describe('Component Schematic', () => { ).toBeRejectedWithError('Selector "app-1-one" is invalid.'); }); + it('should allow dash in selector before a number', async () => { + const options = { ...defaultOptions, name: 'one-1' }; + + const tree = await schematicRunner.runSchematic('component', options, appTree); + const content = tree.readContent('/projects/bar/src/app/one-1/one-1.component.ts'); + expect(content).toMatch(/selector: 'app-one-1'/); + }); + + it('should allow dash in selector before a number and with a custom prefix', async () => { + const options = { ...defaultOptions, name: 'one-1', prefix: 'pre' }; + + const tree = await schematicRunner.runSchematic('component', options, appTree); + const content = tree.readContent('/projects/bar/src/app/one-1/one-1.component.ts'); + expect(content).toMatch(/selector: 'pre-one-1'/); + }); + + it('should allow dash in selector before a number and without a prefix', async () => { + const options = { ...defaultOptions, name: 'one-2', selector: 'one-2' }; + + const tree = await schematicRunner.runSchematic('component', options, appTree); + const content = tree.readContent('/projects/bar/src/app/one-2/one-2.component.ts'); + expect(content).toMatch(/selector: 'one-2'/); + }); + it('should use the default project prefix if none is passed', async () => { const options = { ...defaultOptions, prefix: undefined }; diff --git a/packages/schematics/angular/utility/validation.ts b/packages/schematics/angular/utility/validation.ts index 619fe8e924b3..94ee68358608 100644 --- a/packages/schematics/angular/utility/validation.ts +++ b/packages/schematics/angular/utility/validation.ts @@ -10,7 +10,8 @@ import { SchematicsException } from '@angular-devkit/schematics'; // Must start with a letter, and must contain only alphanumeric characters or dashes. // When adding a dash the segment after the dash must also start with a letter. -export const htmlSelectorRe = /^[a-zA-Z][.0-9a-zA-Z]*(:?-[a-zA-Z][.0-9a-zA-Z]*)*$/; +export const htmlSelectorRe = + /^[a-zA-Z][.0-9a-zA-Z]*((:?-[0-9]+)*|(:?-[a-zA-Z][.0-9a-zA-Z]*(:?-[0-9]+)*)*)$/; // See: https://github.com/tc39/proposal-regexp-unicode-property-escapes/blob/fe6d07fad74cd0192d154966baa1e95e7cda78a1/README.md#other-examples const ecmaIdentifierNameRegExp = /^(?:[$_\p{ID_Start}])(?:[$_\u200C\u200D\p{ID_Continue}])*$/u;