From 0e21fa0368e4822fa1a079d6d74d519a18d61358 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leosvel=20P=C3=A9rez=20Espinosa?=
 <leosvel.perez.espinosa@gmail.com>
Date: Tue, 3 May 2022 16:16:30 +0100
Subject: [PATCH] fix(angular): normalize project name and don't default to
 npmScope as prefix when it's not a valid html selector (#10116)

---
 .../application/application.spec.ts           |  2 +-
 .../application/lib/normalize-options.ts      | 10 +++++--
 .../library/lib/normalize-options.ts          |  8 ++---
 .../angular/src/generators/utils/project.ts   | 30 +++++++++++++++----
 4 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/packages/angular/src/generators/application/application.spec.ts b/packages/angular/src/generators/application/application.spec.ts
index dcfcda3a7fd02..29ba9bcb97743 100644
--- a/packages/angular/src/generators/application/application.spec.ts
+++ b/packages/angular/src/generators/application/application.spec.ts
@@ -316,7 +316,7 @@ describe('app', () => {
       // ASSERT
       const workspaceJson = readJson(appTree, '/workspace.json');
 
-      expect(workspaceJson.projects['src-websites-my-app']).toMatchSnapshot();
+      expect(workspaceJson.projects['src-9-websites-my-app']).toMatchSnapshot();
     });
 
     it('should generate files', async () => {
diff --git a/packages/angular/src/generators/application/lib/normalize-options.ts b/packages/angular/src/generators/application/lib/normalize-options.ts
index 2244923fbb4bc..a51679c11d79f 100644
--- a/packages/angular/src/generators/application/lib/normalize-options.ts
+++ b/packages/angular/src/generators/application/lib/normalize-options.ts
@@ -10,7 +10,11 @@ import type { NormalizedSchema } from './normalized-schema';
 import { names, getWorkspaceLayout } from '@nrwl/devkit';
 import { E2eTestRunner, UnitTestRunner } from '../../../utils/test-runners';
 import { Linter } from '@nrwl/linter';
-import { normalizeDirectory, normalizeProjectName } from '../../utils/project';
+import {
+  normalizeDirectory,
+  normalizePrefix,
+  normalizeProjectName,
+} from '../../utils/project';
 
 export function normalizeOptions(
   host: Tree,
@@ -33,7 +37,7 @@ export function normalizeOptions(
     ? options.tags.split(',').map((s) => s.trim())
     : [];
 
-  const defaultPrefix = npmScope;
+  const prefix = normalizePrefix(options.prefix, npmScope);
 
   options.standaloneConfig = options.standaloneConfig ?? standaloneAsDefault;
 
@@ -64,7 +68,7 @@ export function normalizeOptions(
     linter: Linter.EsLint,
     strict: true,
     ...options,
-    prefix: options.prefix ?? defaultPrefix,
+    prefix,
     name: appProjectName,
     appProjectRoot,
     e2eProjectRoot,
diff --git a/packages/angular/src/generators/library/lib/normalize-options.ts b/packages/angular/src/generators/library/lib/normalize-options.ts
index d498f87696781..d07f5968f59b8 100644
--- a/packages/angular/src/generators/library/lib/normalize-options.ts
+++ b/packages/angular/src/generators/library/lib/normalize-options.ts
@@ -10,6 +10,7 @@ import { NormalizedSchema } from './normalized-schema';
 import { names } from '@nrwl/devkit';
 import { Linter } from '@nrwl/linter';
 import { UnitTestRunner } from '../../../utils/test-runners';
+import { normalizePrefix } from '../../utils/project';
 
 export function normalizeOptions(
   host: Tree,
@@ -50,12 +51,11 @@ export function normalizeOptions(
     ? options.tags.split(',').map((s) => s.trim())
     : [];
   const modulePath = `${projectRoot}/src/lib/${fileName}.module.ts`;
-  const defaultPrefix = npmScope;
+  const prefix = normalizePrefix(options.prefix, npmScope);
 
   options.standaloneConfig = options.standaloneConfig ?? standaloneAsDefault;
 
-  const importPath =
-    options.importPath || `@${defaultPrefix}/${projectDirectory}`;
+  const importPath = options.importPath || `@${npmScope}/${projectDirectory}`;
 
   // Determine the roots where @schematics/angular will place the projects
   // This might not be where the projects actually end up
@@ -72,7 +72,7 @@ export function normalizeOptions(
     ...options,
     linter: options.linter ?? Linter.EsLint,
     unitTestRunner: options.unitTestRunner ?? UnitTestRunner.Jest,
-    prefix: options.prefix ?? defaultPrefix,
+    prefix,
     name: projectName,
     projectRoot,
     entryFile: 'index',
diff --git a/packages/angular/src/generators/utils/project.ts b/packages/angular/src/generators/utils/project.ts
index 17a5920dc8ad2..e80797c01f4fe 100644
--- a/packages/angular/src/generators/utils/project.ts
+++ b/packages/angular/src/generators/utils/project.ts
@@ -1,13 +1,33 @@
 import { names } from '@nrwl/devkit';
 
-export function normalizeDirectory(appName: string, directoryName: string) {
+export function normalizeDirectory(
+  appName: string,
+  directoryName: string
+): string {
   return directoryName
     ? `${names(directoryName).fileName}/${names(appName).fileName}`
     : names(appName).fileName;
 }
 
-export function normalizeProjectName(appName: string, directoryName: string) {
-  return normalizeDirectory(appName, directoryName)
-    .replace(new RegExp('/', 'g'), '-')
-    .replace(/-\d+/g, '');
+export function normalizeProjectName(
+  appName: string,
+  directoryName: string
+): string {
+  return normalizeDirectory(appName, directoryName).replace(/\//g, '-');
+}
+
+export function normalizePrefix(
+  prefix: string | undefined,
+  npmScope: string | undefined
+): string {
+  if (prefix) {
+    return prefix;
+  }
+
+  // Prefix needs to be a valid html selector, if npmScope it's not valid, we don't default
+  // to it and let it fall through to the Angular schematic to handle it
+  // https://github.com/angular/angular-cli/blob/1c634cd327e5a850553b258aa2d5e6a6b2c75c65/packages/schematics/angular/component/index.ts#L130
+  const htmlSelectorRegex =
+    /^[a-zA-Z][.0-9a-zA-Z]*(:?-[a-zA-Z][.0-9a-zA-Z]*)*$/;
+  return npmScope && htmlSelectorRegex.test(npmScope) ? npmScope : undefined;
 }