fix(@schematics/angular): allow dash in selector before a number

This commit updates the validator regexp to allow a dash before a number.

Closes #25164

Author: clydin

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

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;