feat(angular): use helper to determine project name and root director…

…y in project generators (#18607)

docs/generated/packages/angular/generators/application.json

@@ -1,6 +1,6 @@
 {
   "name": "application",
-  "factory": "./src/generators/application/application",
+  "factory": "./src/generators/application/application#applicationGeneratorInternal",
   "schema": {
     "$schema": "http://json-schema.org/schema",
     "$id": "GeneratorNxApp",
@@ -14,13 +14,18 @@
         "type": "string",
         "$default": { "$source": "argv", "index": 0 },
         "x-prompt": "What name would you like to use for the application?",
-        "pattern": "^[a-zA-Z].*$"
+        "pattern": "^[a-zA-Z][^:]*$"
       },
       "directory": {
         "description": "The directory of the new application.",
         "type": "string",
         "x-priority": "important"
       },
+      "projectNameAndRootFormat": {
+        "description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).",
+        "type": "string",
+        "enum": ["as-provided", "derived"]
+      },
       "style": {
         "description": "The file extension to be used for style files.",
         "type": "string",
@@ -178,7 +183,7 @@
   "aliases": ["app"],
   "x-type": "application",
   "description": "Creates an Angular application.",
-  "implementation": "/packages/angular/src/generators/application/application.ts",
+  "implementation": "/packages/angular/src/generators/application/application#applicationGeneratorInternal.ts",
   "hidden": false,
   "path": "/packages/angular/src/generators/application/schema.json",
   "type": "generator"

docs/generated/packages/angular/generators/host.json

@@ -1,6 +1,6 @@
 {
   "name": "host",
-  "factory": "./src/generators/host/host",
+  "factory": "./src/generators/host/host#hostInternal",
   "schema": {
     "$schema": "http://json-schema.org/schema",
     "$id": "NxMFHost",
@@ -19,7 +19,7 @@
         "type": "string",
         "description": "The name to give to the host Angular application.",
         "$default": { "$source": "argv", "index": 0 },
-        "pattern": "^[a-zA-Z].*$"
+        "pattern": "^[a-zA-Z][^:]*$"
       },
       "remotes": {
         "type": "array",
@@ -35,6 +35,11 @@
         "description": "The directory of the new application.",
         "type": "string"
       },
+      "projectNameAndRootFormat": {
+        "description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).",
+        "type": "string",
+        "enum": ["as-provided", "derived"]
+      },
       "style": {
         "description": "The file extension to be used for style files.",
         "type": "string",
@@ -173,7 +178,7 @@
   },
   "x-type": "application",
   "description": "Generate a Host Angular Module Federation Application.",
-  "implementation": "/packages/angular/src/generators/host/host.ts",
+  "implementation": "/packages/angular/src/generators/host/host#hostInternal.ts",
   "aliases": [],
   "hidden": false,
   "path": "/packages/angular/src/generators/host/schema.json",

docs/generated/packages/angular/generators/library.json

@@ -1,6 +1,6 @@
 {
   "name": "library",
-  "factory": "./src/generators/library/library",
+  "factory": "./src/generators/library/library#libraryGeneratorInternal",
   "schema": {
     "$schema": "http://json-schema.org/schema",
     "$id": "GeneratorAngularLibrary",
@@ -14,13 +14,18 @@
         "description": "The name of the library.",
         "$default": { "$source": "argv", "index": 0 },
         "x-prompt": "What name would you like to use for the library?",
-        "pattern": "^[a-zA-Z].*$"
+        "pattern": "(?:^@[a-zA-Z0-9-*~][a-zA-Z0-9-*._~]*\\/[a-zA-Z0-9-~][a-zA-Z0-9-._~]*|^[a-zA-Z][^:]*)$"
       },
       "directory": {
         "type": "string",
         "description": "A directory where the library is placed.",
         "x-priority": "important"
       },
+      "projectNameAndRootFormat": {
+        "description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).",
+        "type": "string",
+        "enum": ["as-provided", "derived"]
+      },
       "publishable": {
         "type": "boolean",
         "default": false,
@@ -205,7 +210,7 @@
   "aliases": ["lib"],
   "x-type": "library",
   "description": "Creates an Angular library.",
-  "implementation": "/packages/angular/src/generators/library/library.ts",
+  "implementation": "/packages/angular/src/generators/library/library#libraryGeneratorInternal.ts",
   "hidden": false,
   "path": "/packages/angular/src/generators/library/schema.json",
   "type": "generator"

docs/generated/packages/angular/generators/remote.json

@@ -1,6 +1,6 @@
 {
   "name": "remote",
-  "factory": "./src/generators/remote/remote",
+  "factory": "./src/generators/remote/remote#remoteInternal",
   "schema": {
     "$schema": "http://json-schema.org/schema",
     "$id": "NxMFRemote",
@@ -19,7 +19,7 @@
         "type": "string",
         "description": "The name to give to the remote Angular app.",
         "$default": { "$source": "argv", "index": 0 },
-        "pattern": "^[a-zA-Z].*$"
+        "pattern": "^[a-zA-Z][^:]*$"
       },
       "host": {
         "type": "string",
@@ -35,6 +35,11 @@
         "description": "The directory of the new application.",
         "type": "string"
       },
+      "projectNameAndRootFormat": {
+        "description": "Whether to generate the project name and root directory as provided (`as-provided`) or generate them composing their values and taking the configured layout into account (`derived`).",
+        "type": "string",
+        "enum": ["as-provided", "derived"]
+      },
       "style": {
         "description": "The file extension to be used for style files.",
         "type": "string",
@@ -166,7 +171,7 @@
   },
   "x-type": "application",
   "description": "Generate a Remote Angular Module Federation Application.",
-  "implementation": "/packages/angular/src/generators/remote/remote.ts",
+  "implementation": "/packages/angular/src/generators/remote/remote#remoteInternal.ts",
   "aliases": [],
   "hidden": false,
   "path": "/packages/angular/src/generators/remote/schema.json",

e2e/angular-core/src/module-federation.test.ts

@@ -1,5 +1,6 @@
 import { names } from '@nx/devkit';
 import {
+  checkFilesExist,
   cleanupProject,
   killProcessAndPorts,
   newProject,
@@ -195,4 +196,39 @@ describe('Angular Module Federation', () => {
     // port and process cleanup
     await killProcessAndPorts(process.pid, hostPort, remote1Port, remote2Port);
   }, 20_000_000);
+
+  it('should should support generating host and remote apps with the new name and root format', async () => {
+    const hostApp = uniq('host');
+    const remoteApp = uniq('remote');
+    const hostPort = 4800;
+    const remotePort = 4801;
+
+    // generate host app
+    runCLI(
+      `generate @nx/angular:host ${hostApp} --project-name-and-root-format=as-provided --no-interactive`
+    );
+    // generate remote app
+    runCLI(
+      `generate @nx/angular:remote ${remoteApp} --host=${hostApp} --port=${remotePort} --project-name-and-root-format=as-provided --no-interactive`
+    );
+
+    // check files are generated without the layout directory ("apps/") and
+    // using the project name as the directory when no directory is provided
+    checkFilesExist(`${hostApp}/src/app/app.module.ts`);
+    checkFilesExist(`${remoteApp}/src/app/app.module.ts`);
+
+    // check default generated host is built successfully
+    const buildOutput = runCLI(`build ${hostApp}`);
+    expect(buildOutput).toContain('Successfully ran target build');
+
+    const process = await runCommandUntil(
+      `serve ${hostApp} --port=${hostPort} --dev-remotes=${remoteApp}`,
+      (output) =>
+        output.includes(`listening on localhost:${remotePort}`) &&
+        output.includes(`listening on localhost:${hostPort}`)
+    );
+
+    // port and process cleanup
+    await killProcessAndPorts(process.pid, hostPort, remotePort);
+  }, 20_000_000);
 });

e2e/angular-core/src/projects.test.ts

@@ -350,4 +350,53 @@ describe('Angular Projects', () => {
     );
     expect(buildOutput).toContain('Successfully ran target build');
   });
+
+  it('should support generating projects with the new name and root format', () => {
+    const appName = uniq('app1');
+    const libName = uniq('@my-org/lib1');
+
+    runCLI(
+      `generate @nx/angular:app ${appName} --project-name-and-root-format=as-provided --no-interactive`
+    );
+
+    // check files are generated without the layout directory ("apps/") and
+    // using the project name as the directory when no directory is provided
+    checkFilesExist(`${appName}/src/app/app.module.ts`);
+    // check build works
+    expect(runCLI(`build ${appName}`)).toContain(
+      `Successfully ran target build for project ${appName}`
+    );
+    // check tests pass
+    const appTestResult = runCLI(`test ${appName}`);
+    expect(appTestResult).toContain(
+      `Successfully ran target test for project ${appName}`
+    );
+
+    // assert scoped project names are not supported when --project-name-and-root-format=derived
+    expect(() =>
+      runCLI(
+        `generate @nx/angular:lib ${libName} --buildable --project-name-and-root-format=derived`
+      )
+    ).toThrow();
+
+    runCLI(
+      `generate @nx/angular:lib ${libName} --buildable --project-name-and-root-format=as-provided`
+    );
+
+    // check files are generated without the layout directory ("libs/") and
+    // using the project name as the directory when no directory is provided
+    checkFilesExist(
+      `${libName}/src/index.ts`,
+      `${libName}/src/lib/${libName.split('/')[1]}.module.ts`
+    );
+    // check build works
+    expect(runCLI(`build ${libName}`)).toContain(
+      `Successfully ran target build for project ${libName}`
+    );
+    // check tests pass
+    const libTestResult = runCLI(`test ${libName}`);
+    expect(libTestResult).toContain(
+      `Successfully ran target test for project ${libName}`
+    );
+  }, 500_000);
 });

packages/angular/generators.json

@@ -163,7 +163,7 @@
       "hidden": true
     },
     "application": {
-      "factory": "./src/generators/application/application",
+      "factory": "./src/generators/application/application#applicationGeneratorInternal",
       "schema": "./src/generators/application/schema.json",
       "aliases": ["app"],
       "x-type": "application",
@@ -211,7 +211,7 @@
       "hidden": true
     },
     "library": {
-      "factory": "./src/generators/library/library",
+      "factory": "./src/generators/library/library#libraryGeneratorInternal",
       "schema": "./src/generators/library/schema.json",
       "aliases": ["lib"],
       "x-type": "library",
@@ -224,7 +224,7 @@
       "description": "Creates a secondary entry point for an Angular publishable library."
     },
     "remote": {
-      "factory": "./src/generators/remote/remote",
+      "factory": "./src/generators/remote/remote#remoteInternal",
       "schema": "./src/generators/remote/schema.json",
       "x-type": "application",
       "description": "Generate a Remote Angular Module Federation Application."
@@ -241,7 +241,7 @@
       "description": "Converts an old micro frontend configuration to use the new withModuleFederation helper. It will run successfully if the following conditions are met: \n - Is either a host or remote application \n - Shared npm package configurations have not been modified \n - Name used to identify the Micro Frontend application matches the project name \n\n{% callout type=\"warning\" title=\"Overrides\" %}This generator will overwrite your webpack config. If you have additional custom configuration in your config file, it will be lost!{% /callout %}"
     },
     "host": {
-      "factory": "./src/generators/host/host",
+      "factory": "./src/generators/host/host#hostInternal",
       "schema": "./src/generators/host/schema.json",
       "x-type": "application",
       "description": "Generate a Host Angular Module Federation Application."

packages/angular/src/generators/application/application.ts

@@ -30,6 +30,16 @@ import { prompt } from 'enquirer';
 export async function applicationGenerator(
   tree: Tree,
   schema: Partial<Schema>
+): Promise<GeneratorCallback> {
+  return await applicationGeneratorInternal(tree, {
+    projectNameAndRootFormat: 'derived',
+    ...schema,
+  });
+}
+
+export async function applicationGeneratorInternal(
+  tree: Tree,
+  schema: Partial<Schema>
 ): Promise<GeneratorCallback> {
   const installedAngularVersionInfo = getInstalledAngularVersionInfo(tree);
 
@@ -50,7 +60,7 @@ export async function applicationGenerator(
     }).then((a) => a['standalone-components']);
   }
 
-  const options = normalizeOptions(tree, schema);
+  const options = await normalizeOptions(tree, schema);
   const rootOffset = offsetFromRoot(options.appProjectRoot);
 
   await angularInitGenerator(tree, {

packages/angular/src/generators/application/lib/add-e2e.ts

@@ -10,19 +10,18 @@ import {
 } from '@nx/devkit';
 import { nxVersion } from '../../../utils/versions';
 import type { NormalizedSchema } from './normalized-schema';
-import { removeScaffoldedE2e } from './remove-scaffolded-e2e';
 import { cypressProjectGenerator } from '@nx/cypress';
 
 export async function addE2e(tree: Tree, options: NormalizedSchema) {
-  removeScaffoldedE2e(tree, options, options.ngCliSchematicE2ERoot);
-
   if (options.e2eTestRunner === 'cypress') {
     // TODO: This can call `@nx/web:static-config` generator when ready
     addFileServerTarget(tree, options, 'serve-static');
 
     await cypressProjectGenerator(tree, {
       name: options.e2eProjectName,
-      directory: options.directory,
+      directory: options.e2eProjectRoot,
+      // the name and root are already normalized, instruct the generator to use them as is
+      projectNameAndRootFormat: 'as-provided',
       project: options.name,
       linter: options.linter,
       standaloneConfig: options.standaloneConfig,

packages/angular/src/generators/application/lib/index.ts

@@ -7,7 +7,5 @@ export * from './create-project';
 export * from './enable-strict-type-checking';
 export * from './normalize-options';
 export * from './normalized-schema';
-export * from './remove-scaffolded-e2e';
 export * from './set-app-strict-default';
-export * from './update-e2e-project';
 export * from './update-editor-tsconfig';