fix(angular): normalize project name and don't default to npmScope as prefix when it's not a valid html selector

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 () => {

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,

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',

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