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

…tive selectors
nrwl · Feb 16, 2024 · eff76f3 · eff76f3
1 parent 0f0074c
commit eff76f3
Show file tree

Hide file tree

Showing 39 changed files with 338 additions and 153 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
@@ -345,7 +345,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
       })
@@ -420,7 +420,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/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",
@@ -429,7 +429,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",
@@ -681,7 +681,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',
 })
@@ -749,7 +749,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',
 })
@@ -890,7 +890,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',
 })
@@ -943,7 +943,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",
@@ -1075,7 +1075,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
@@ -450,7 +450,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 () => {
@@ -460,7 +460,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 () => {
@@ -571,15 +571,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';
@@ -35,12 +33,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);
@@ -61,7 +53,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": {