fix(angular): throw error when npmScope is incorrect (#10366)

* fix(angular): throw error when npmScope is incorrect

* fix(angular): use 'app' as default if npmScope is not defined

Co-authored-by: Leosvel Pérez Espinosa <leosvel.perez.espinosa@gmail.com>

Co-authored-by: Leosvel Pérez Espinosa <leosvel.perez.espinosa@gmail.com>

packages/angular/src/generators/utils/project.ts

@@ -29,5 +29,17 @@ export function normalizePrefix(
   // 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;
+  if (npmScope && !htmlSelectorRegex.test(npmScope)) {
+    throw new Error(`The "--prefix" option was not provided, therefore attempted to use the "npmScope" defined in "nx.json" to set the application's selector prefix, but it is invalid.
+
+There are two options that can be followed to resolve this issue:
+  - Pass a valid "--prefix" option.
+  - Update the "npmScope" in "nx.json" (Note: this can be an involved process, as other libraries and applications may need to be updated to match the new scope).
+
+If you encountered this error when creating a new Nx Workspace, the workspace name or "npmScope" is invalid to use as the selector prefix for the application being generated.
+
+Valid selector prefixes 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.`);
+  }
+
+  return npmScope || 'app';
 }