From 2b91472c8ed12b624dcc1256b5b2eae472b86b4d Mon Sep 17 00:00:00 2001
From: Charles Lyding <19598772+clydin@users.noreply.github.com>
Date: Tue, 30 May 2023 15:03:21 -0400
Subject: [PATCH] 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

(cherry picked from commit c5827d412f821727bbb8c6f885b35b717d607a82)
---
 .../angular/component/index_spec.ts           | 24 +++++++++++++++++++
 .../schematics/angular/utility/validation.ts  |  3 ++-
 2 files changed, 26 insertions(+), 1 deletion(-)

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;