fix(angular): stop using npmScope as a prefix for component and direc…

…tive selectors (nrwl#21828)
fahslaj · Feb 21, 2024 · cfa0815 · cfa0815
1 parent fe72ab4
commit cfa0815
Show file tree

Hide file tree

Showing 41 changed files with 364 additions and 155 deletions.
diff --git a/docs/generated/cli/create-nx-workspace.md b/docs/generated/cli/create-nx-workspace.md
@@ -135,6 +135,12 @@ Default: `npm`
 
 Package manager to use
 
+### prefix
+
+Type: `string`
+
+Prefix to use for Angular component and directive selectors.
+
 ### preset
 
 Type: `string`

diff --git a/docs/generated/packages/angular/generators/application.json b/docs/generated/packages/angular/generators/application.json
@@ -78,6 +78,7 @@
         "type": "string",
         "format": "html-selector",
         "description": "The prefix to apply to generated selectors.",
+        "default": "app",
         "alias": "p"
       },
       "skipTests": {

diff --git a/docs/generated/packages/nx/documents/create-nx-workspace.md b/docs/generated/packages/nx/documents/create-nx-workspace.md
@@ -135,6 +135,12 @@ Default: `npm`
 
 Package manager to use
 
+### prefix
+
+Type: `string`
+
+Prefix to use for Angular component and directive selectors.
+
 ### preset
 
 Type: `string`

diff --git a/docs/generated/packages/workspace/generators/new.json b/docs/generated/packages/workspace/generators/new.json
@@ -79,6 +79,10 @@
         "description": "Enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) for the Angular application.",
         "type": "boolean",
         "default": false
+      },
+      "prefix": {
+        "description": "The prefix to use for Angular component and directive selectors.",
+        "type": "string"
       }
     },
     "additionalProperties": true,

diff --git a/docs/generated/packages/workspace/generators/preset.json b/docs/generated/packages/workspace/generators/preset.json
@@ -96,6 +96,10 @@
         "description": "Enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) for the Angular application.",
         "type": "boolean",
         "default": false
+      },
+      "prefix": {
+        "description": "The prefix to use for Angular component and directive selectors.",
+        "type": "string"
       }
     },
     "required": ["preset", "name"],

diff --git a/e2e/angular-module-federation/src/module-federation.test.ts b/e2e/angular-module-federation/src/module-federation.test.ts
@@ -346,7 +346,7 @@ describe('Angular Module Federation', () => {
       import { isEven } from '${remote}/${module}';
 
       @Component({
-        selector: 'proj-root',
+        selector: 'app-root',
         template: \`<div class="host">{{title}}</div>\`,
         standalone: true
       })
@@ -433,7 +433,7 @@ describe('Angular Module Federation', () => {
       import { isEven } from '${childRemote}/${module}';
 
       @Component({
-        selector: 'proj-${remote}-entry',
+        selector: 'app-${remote}-entry',
         template: \`<div class="childremote">{{title}}</div>\`,
         standalone: true
       })

diff --git a/e2e/utils/create-project-utils.ts b/e2e/utils/create-project-utils.ts
@@ -233,6 +233,7 @@ export function runCreateWorkspace(
     e2eTestRunner,
     ssr,
     framework,
+    prefix,
   }: {
     preset: string;
     appName?: string;
@@ -251,6 +252,7 @@ export function runCreateWorkspace(
     e2eTestRunner?: 'cypress' | 'playwright' | 'jest' | 'detox' | 'none';
     ssr?: boolean;
     framework?: string;
+    prefix?: string;
   }
 ) {
   projName = name;
@@ -317,6 +319,10 @@ export function runCreateWorkspace(
     command += ` --ssr=${ssr}`;
   }
 
+  if (prefix !== undefined) {
+    command += ` --prefix=${prefix}`;
+  }
+
   try {
     const create = execSync(`${command}${isVerbose() ? ' --verbose' : ''}`, {
       cwd,

diff --git a/e2e/workspace-create/src/create-nx-workspace.test.ts b/e2e/workspace-create/src/create-nx-workspace.test.ts
@@ -156,8 +156,7 @@ describe('create-nx-workspace', () => {
 
   it('should fail correctly when preset errors', () => {
     // Using Angular Preset as the example here to test
-    // It will error when npmScope is of form `<char>-<num>-<char>`
-    // Due to a validation error Angular will throw.
+    // It will error when prefix is not valid
     const wsName = uniq('angular-1-test');
     const appName = uniq('app');
     expect(() =>
@@ -171,6 +170,7 @@ describe('create-nx-workspace', () => {
         e2eTestRunner: 'none',
         bundler: 'webpack',
         ssr: false,
+        prefix: '1-one',
       })
     ).toThrow();
   });

diff --git a/packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap b/packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap
@@ -24,7 +24,7 @@ exports[`app --minimal should skip "nx-welcome.component.ts" file and references
 "import { Component } from '@angular/core';
 
 @Component({
-  selector: 'proj-root',
+  selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
 })
@@ -83,7 +83,7 @@ exports[`app --minimal should skip "nx-welcome.component.ts" file and references
 "import { Component } from '@angular/core';
 
 @Component({
-  selector: 'proj-root',
+  selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
 })
@@ -127,7 +127,7 @@ import { RouterModule } from '@angular/router';
 @Component({
   standalone: true,
   imports: [RouterModule],
-  selector: 'proj-root',
+  selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
 })
@@ -170,7 +170,7 @@ exports[`app --minimal should skip "nx-welcome.component.ts" file and references
 @Component({
   standalone: true,
   imports: [],
-  selector: 'proj-root',
+  selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
 })
@@ -210,7 +210,7 @@ exports[`app --project-name-and-root-format=derived should generate correctly wh
 {
   "$schema": "../../../node_modules/nx/schemas/project-schema.json",
   "name": "my-dir-my-app",
-  "prefix": "proj",
+  "prefix": "app",
   "projectType": "application",
   "root": "apps/my-dir/my-app",
   "sourceRoot": "apps/my-dir/my-app/src",
@@ -409,7 +409,7 @@ exports[`app --project-name-and-root-format=derived should generate correctly wh
 {
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "name": "my-app",
-  "prefix": "proj",
+  "prefix": "app",
   "projectType": "application",
   "root": "apps/my-app",
   "sourceRoot": "apps/my-app/src",
@@ -641,7 +641,7 @@ import { NxWelcomeComponent } from './nx-welcome.component';
 @Component({
   standalone: true,
   imports: [NxWelcomeComponent, RouterModule],
-  selector: 'proj-root',
+  selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
 })
@@ -709,7 +709,7 @@ import { NxWelcomeComponent } from './nx-welcome.component';
 @Component({
   standalone: true,
   imports: [NxWelcomeComponent, ],
-  selector: 'proj-root',
+  selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
 })
@@ -850,7 +850,7 @@ exports[`app format files should format files 2`] = `
 "import { Component } from '@angular/core';
 
 @Component({
-  selector: 'proj-root',
+  selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
 })
@@ -903,7 +903,7 @@ exports[`app nested should create project configs 1`] = `
 {
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "name": "my-app",
-  "prefix": "proj",
+  "prefix": "app",
   "projectType": "application",
   "root": "my-dir/my-app",
   "sourceRoot": "my-dir/my-app/src",
@@ -1015,7 +1015,7 @@ exports[`app not nested should create project configs 1`] = `
 {
   "$schema": "../node_modules/nx/schemas/project-schema.json",
   "name": "my-app",
-  "prefix": "proj",
+  "prefix": "app",
   "projectType": "application",
   "root": "my-app",
   "sourceRoot": "my-app/src",

diff --git a/packages/angular/src/generators/application/application.spec.ts b/packages/angular/src/generators/application/application.spec.ts
@@ -449,7 +449,7 @@ describe('app', () => {
       await generateApp(appTree, 'my-app', { directory: 'my-dir/my-app' });
       expect(
         appTree.read('my-dir/my-app/src/app/app.component.html', 'utf-8')
-      ).toContain('<proj-nx-welcome></proj-nx-welcome>');
+      ).toContain('<app-nx-welcome></app-nx-welcome>');
     });
 
     it("should update `template`'s property of AppComponent with Nx content", async () => {
@@ -459,7 +459,7 @@ describe('app', () => {
       });
       expect(
         appTree.read('my-dir/my-app/src/app/app.component.ts', 'utf-8')
-      ).toContain('<proj-nx-welcome></proj-nx-welcome>');
+      ).toContain('<app-nx-welcome></app-nx-welcome>');
     });
 
     it('should create Nx specific `nx-welcome.component.ts` file', async () => {
@@ -598,15 +598,15 @@ describe('app', () => {
                   "@angular-eslint/component-selector": [
                     "error",
                     {
-                      "prefix": "proj",
+                      "prefix": "app",
                       "style": "kebab-case",
                       "type": "element",
                     },
                   ],
                   "@angular-eslint/directive-selector": [
                     "error",
                     {
-                      "prefix": "proj",
+                      "prefix": "app",
                       "style": "camelCase",
                       "type": "attribute",
                     },

diff --git a/packages/angular/src/generators/application/lib/create-files.ts b/packages/angular/src/generators/application/lib/create-files.ts
@@ -5,6 +5,7 @@ import { getRelativePathToRootTsConfig, getRootTsConfigFileName } from '@nx/js';
 import { createTsConfig } from '../../utils/create-ts-config';
 import { UnitTestRunner } from '../../../utils/test-runners';
 import { getInstalledAngularVersionInfo } from '../../utils/version-utils';
+import { validateHtmlSelector } from '../../utils/selector';
 
 export async function createFiles(
   tree: Tree,
@@ -15,8 +16,13 @@ export async function createFiles(
   const isUsingApplicationBuilder =
     angularMajorVersion >= 17 && options.bundler === 'esbuild';
 
+  const rootSelector = `${options.prefix}-root`;
+  validateHtmlSelector(rootSelector);
+  const nxWelcomeSelector = `${options.prefix}-nx-welcome`;
+  validateHtmlSelector(nxWelcomeSelector);
+
   const substitutions = {
-    rootSelector: `${options.prefix}-root`,
+    rootSelector,
     appName: options.name,
     inlineStyle: options.inlineStyle,
     inlineTemplate: options.inlineTemplate,
@@ -25,7 +31,7 @@ export async function createFiles(
     unitTesting: options.unitTestRunner !== UnitTestRunner.None,
     routing: options.routing,
     minimal: options.minimal,
-    nxWelcomeSelector: `${options.prefix}-nx-welcome`,
+    nxWelcomeSelector,
     rootTsConfig: joinPathFragments(rootOffset, getRootTsConfigFileName(tree)),
     angularMajorVersion,
     rootOffset,

diff --git a/packages/angular/src/generators/application/lib/normalize-options.ts b/packages/angular/src/generators/application/lib/normalize-options.ts
@@ -1,9 +1,7 @@
 import { joinPathFragments, type Tree } from '@nx/devkit';
 import { determineProjectNameAndRootOptions } from '@nx/devkit/src/generators/project-name-and-root-utils';
 import { Linter } from '@nx/eslint';
-import { getNpmScope } from '@nx/js/src/utils/package-json/get-npm-scope';
 import { E2eTestRunner, UnitTestRunner } from '../../../utils/test-runners';
-import { normalizeNewProjectPrefix } from '../../utils/project';
 import type { Schema } from '../schema';
 import type { NormalizedSchema } from './normalized-schema';
 import { getInstalledAngularVersionInfo } from '../../utils/version-utils';
@@ -34,12 +32,6 @@ export async function normalizeOptions(
     ? options.tags.split(',').map((s) => s.trim())
     : [];
 
-  const prefix = normalizeNewProjectPrefix(
-    options.prefix,
-    getNpmScope(host),
-    'app'
-  );
-
   let bundler = options.bundler;
   if (!bundler) {
     const { major: angularMajorVersion } = getInstalledAngularVersionInfo(host);
@@ -60,7 +52,7 @@ export async function normalizeOptions(
     strict: true,
     standalone: true,
     ...options,
-    prefix,
+    prefix: options.prefix || 'app',
     name: appProjectName,
     appProjectRoot,
     appProjectSourceRoot: `${appProjectRoot}/src`,

diff --git a/packages/angular/src/generators/application/schema.json b/packages/angular/src/generators/application/schema.json
@@ -81,6 +81,7 @@
       "type": "string",
       "format": "html-selector",
       "description": "The prefix to apply to generated selectors.",
+      "default": "app",
       "alias": "p"
     },
     "skipTests": {