feat(core): add standalone api prompt to CNW (#14886)

docs/generated/cli/create-nx-workspace.md

@@ -139,6 +139,12 @@ Default: `false`
 
 Skip initializing a git repository.
 
+### standaloneApi
+
+Type: `string`
+
+Use Standalone Components if generating an Angular app
+
 ### style
 
 Type: `string`

docs/generated/packages/nx/documents/create-nx-workspace.md

@@ -139,6 +139,12 @@ Default: `false`
 
 Skip initializing a git repository.
 
+### standaloneApi
+
+Type: `string`
+
+Use Standalone Components if generating an Angular app
+
 ### style
 
 Type: `string`

docs/generated/packages/workspace/generators/new.json

@@ -29,6 +29,11 @@
         "type": "string",
         "description": "Npm scope for importing libs."
       },
+      "standaloneApi": {
+        "description": "Use the Standalone APIs if generating an Angular application.",
+        "type": "boolean",
+        "default": false
+      },
       "defaultBase": {
         "type": "string",
         "description": "Default base branch for affected."

docs/generated/packages/workspace/generators/preset.json

@@ -53,6 +53,11 @@
           ]
         }
       },
+      "standaloneApi": {
+        "description": "Use the Standalone APIs if generating an Angular application.",
+        "type": "boolean",
+        "default": false
+      },
       "standaloneConfig": {
         "description": "Split the project configurations into `<projectRoot>/project.json` rather than including it inside `workspace.json`.",
         "type": "boolean",

e2e/utils/index.ts

@@ -139,6 +139,7 @@ export function runCreateWorkspace(
     cwd = e2eCwd,
     bundler,
     routing,
+    standaloneApi,
   }: {
     preset: string;
     appName?: string;
@@ -150,6 +151,7 @@ export function runCreateWorkspace(
     useDetectedPm?: boolean;
     cwd?: string;
     bundler?: 'webpack' | 'vite';
+    standaloneApi?: boolean;
     routing?: boolean;
   }
 ) {
@@ -172,6 +174,10 @@ export function runCreateWorkspace(
     command += ` --bundler=${bundler}`;
   }
 
+  if (standaloneApi !== undefined) {
+    command += ` --standaloneApi=${standaloneApi}`;
+  }
+
   if (routing !== undefined) {
     command += ` --routing=${routing}`;
   }

e2e/workspace-create/src/create-nx-workspace.test.ts

@@ -42,11 +42,29 @@ describe('create-nx-workspace', () => {
       appName: wsName,
       style: 'css',
       packageManager,
+      standaloneApi: false,
       routing: false,
     });
 
     checkFilesExist('package.json');
     checkFilesExist('project.json');
+    checkFilesExist('src/app/app.module.ts');
+  });
+
+  it('should create a workspace with a single angular app at the root using standalone APIs', () => {
+    const wsName = uniq('angular');
+
+    runCreateWorkspace(wsName, {
+      preset: 'angular-standalone',
+      appName: wsName,
+      style: 'css',
+      packageManager,
+      standaloneApi: true,
+    });
+
+    checkFilesExist('package.json');
+    checkFilesExist('project.json');
+    checkFilesDoNotExist('src/app/app.module.ts');
   });
 
   it('should create a workspace with a single react app with vite at the root', () => {
@@ -129,6 +147,7 @@ describe('create-nx-workspace', () => {
       style: 'css',
       appName,
       packageManager,
+      standaloneApi: false,
       routing: true,
     });
   });
@@ -145,6 +164,7 @@ describe('create-nx-workspace', () => {
         style: 'css',
         appName,
         packageManager,
+        standaloneApi: false,
         routing: true,
       });
     } catch (e) {
@@ -313,6 +333,7 @@ describe('create-nx-workspace', () => {
       style: 'css',
       packageManager: 'npm',
       routing: true,
+      standaloneApi: false,
     });
 
     checkFilesDoNotExist('yarn.lock');

packages/create-nx-workspace/bin/create-nx-workspace.ts

@@ -31,6 +31,7 @@ type Arguments = {
   appName: string;
   style: string;
   framework: string;
+  standaloneApi: string;
   docker: boolean;
   nxCloud: boolean;
   routing: string;
@@ -144,6 +145,10 @@ export const commandsObject: yargs.Argv<Arguments> = yargs
           describe: chalk.dim`Style option to be used when a preset with pregenerated app is selected`,
           type: 'string',
         })
+        .option('standaloneApi', {
+          describe: chalk.dim`Use Standalone Components if generating an Angular app`,
+          type: 'string',
+        })
         .option('routing', {
           describe: chalk.dim`Add a routing setup when a preset with pregenerated app is selected`,
           type: 'string',
@@ -232,6 +237,7 @@ async function main(parsedArgs: yargs.Arguments<Arguments>) {
     preset,
     appName,
     style,
+    standaloneApi,
     routing,
     nxCloud,
     packageManager,
@@ -264,6 +270,7 @@ async function main(parsedArgs: yargs.Arguments<Arguments>) {
       appName,
       style,
       routing,
+      standaloneApi,
       nxCloud,
       defaultBase,
       framework,
@@ -321,7 +328,15 @@ async function getConfiguration(
   argv: yargs.Arguments<Arguments>
 ): Promise<void> {
   try {
-    let name, appName, style, preset, framework, bundler, docker, routing;
+    let name,
+      appName,
+      style,
+      preset,
+      framework,
+      bundler,
+      docker,
+      routing,
+      standaloneApi;
 
     output.log({
       title:
@@ -375,6 +390,7 @@ async function getConfiguration(
         }
 
         if (preset === Preset.AngularStandalone) {
+          standaloneApi = await determineStandaloneApi(argv);
           routing = await determineRouting(argv);
         }
       } else {
@@ -385,6 +401,7 @@ async function getConfiguration(
         }
 
         if (preset === Preset.AngularMonorepo) {
+          standaloneApi = await determineStandaloneApi(argv);
           routing = await determineRouting(argv);
         }
       }
@@ -401,6 +418,7 @@ async function getConfiguration(
       preset,
       appName,
       style,
+      standaloneApi,
       routing,
       framework,
       nxCloud,
@@ -745,6 +763,37 @@ async function determineFramework(
   return Promise.resolve(parsedArgs.framework);
 }
 
+async function determineStandaloneApi(
+  parsedArgs: yargs.Arguments<Arguments>
+): Promise<string> {
+  if (parsedArgs.standaloneApi === undefined) {
+    return enquirer
+      .prompt([
+        {
+          name: 'standaloneApi',
+          message:
+            'Would you like to use Standalone Components in your application?',
+          type: 'autocomplete',
+          choices: [
+            {
+              name: 'Yes',
+            },
+
+            {
+              name: 'No',
+            },
+          ],
+          initial: 'No' as any,
+        },
+      ])
+      .then((a: { standaloneApi: 'Yes' | 'No' }) =>
+        a.standaloneApi === 'Yes' ? 'true' : 'false'
+      );
+  }
+
+  return parsedArgs.standaloneApi;
+}
+
 async function determineDockerfile(
   parsedArgs: yargs.Arguments<Arguments>
 ): Promise<boolean> {

packages/workspace/src/generators/new/generate-preset.ts

@@ -77,6 +77,9 @@ export function generatePreset(host: Tree, opts: NormalizedSchema) {
       opts.framework ? `--framework=${opts.framework}` : null,
       opts.docker ? `--docker=${opts.docker}` : null,
       opts.packageManager ? `--packageManager=${opts.packageManager}` : null,
+      opts.standaloneApi !== undefined
+        ? `--standaloneApi=${opts.standaloneApi}`
+        : null,
       parsedArgs.interactive ? '--interactive=true' : '--interactive=false',
       opts.routing !== undefined ? `--routing=${opts.routing}` : null,
     ].filter((e) => !!e);

packages/workspace/src/generators/new/new.ts

@@ -27,6 +27,7 @@ interface Schema {
   docker?: boolean;
   linter?: Linter;
   bundler?: 'vite' | 'webpack';
+  standaloneApi?: boolean;
   routing?: boolean;
   packageManager?: PackageManager;
 }

packages/workspace/src/generators/new/schema.json

@@ -29,6 +29,11 @@
       "type": "string",
       "description": "Npm scope for importing libs."
     },
+    "standaloneApi": {
+      "description": "Use the Standalone APIs if generating an Angular application.",
+      "type": "boolean",
+      "default": false
+    },
     "defaultBase": {
       "type": "string",
       "description": "Default base branch for affected."

packages/workspace/src/generators/preset/preset.ts

@@ -32,6 +32,7 @@ async function createPreset(tree: Tree, options: Schema) {
       name: options.name,
       style: options.style,
       linter: options.linter,
+      standalone: options.standaloneApi,
       routing: options.routing,
     });
   } else if (options.preset === Preset.AngularStandalone) {
@@ -45,6 +46,7 @@ async function createPreset(tree: Tree, options: Schema) {
       linter: options.linter,
       routing: options.routing,
       rootProject: true,
+      standalone: options.standaloneApi,
     });
   } else if (options.preset === Preset.ReactMonorepo) {
     const {

packages/workspace/src/generators/preset/schema.d.ts

@@ -13,4 +13,5 @@ export interface Schema {
   bundler?: 'vite' | 'webpack';
   docker?: boolean;
   routing?: boolean;
+  standaloneApi?: boolean;
 }

packages/workspace/src/generators/preset/schema.json

@@ -56,6 +56,11 @@
         ]
       }
     },
+    "standaloneApi": {
+      "description": "Use the Standalone APIs if generating an Angular application.",
+      "type": "boolean",
+      "default": false
+    },
     "standaloneConfig": {
       "description": "Split the project configurations into `<projectRoot>/project.json` rather than including it inside `workspace.json`.",
       "type": "boolean",