feat(angular): prompt users for standalone components in application

nrwl · Feb 16, 2023 · fd042aa · fd042aa
1 parent 3d89a02
commit fd042aa
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 5 deletions.
diff --git a/docs/generated/packages/angular/generators/application.json b/docs/generated/packages/angular/generators/application.json
@@ -148,7 +148,7 @@
       "standalone": {
         "description": "Generate an application that is setup to use standalone components. _Note: This is only supported in Angular versions >= 14.1.0_",
         "type": "boolean",
-        "default": false
+        "x-priority": "important"
       },
       "rootProject": {
         "description": "Create an application at the root of the workspace.",

diff --git a/packages/angular/ng-package.json b/packages/angular/ng-package.json
@@ -22,7 +22,8 @@
     "semver",
     "webpack",
     "http-server",
-    "magic-string"
+    "magic-string",
+    "enquirer"
   ],
   "keepLifecycleScripts": true
 }
diff --git a/packages/angular/src/generators/application/application.spec.ts b/packages/angular/src/generators/application/application.spec.ts
@@ -20,17 +20,21 @@ import {
 } from '../../utils/versions';
 import { applicationGenerator } from './application';
 import type { Schema } from './schema';
-
+import * as enquirer from 'enquirer';
 // need to mock cypress otherwise it'll use the nx installed version from package.json
 //  which is v9 while we are testing for the new v10 version
 jest.mock('@nrwl/cypress/src/utils/cypress-version');
+jest.mock('enquirer');
 describe('app', () => {
   let appTree: Tree;
   let mockedInstalledCypressVersion: jest.Mock<
     ReturnType<typeof installedCypressVersion>
   > = installedCypressVersion as never;
+
   beforeEach(() => {
     mockedInstalledCypressVersion.mockReturnValue(10);
+    // @ts-ignore
+    enquirer.prompt = jest.fn().mockReturnValue(Promise.resolve(false));
     appTree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
   });
 

diff --git a/packages/angular/src/generators/application/application.ts b/packages/angular/src/generators/application/application.ts
@@ -33,7 +33,8 @@ import {
   updateNxComponentTemplate,
 } from './lib';
 import type { Schema } from './schema';
-import { lt } from 'semver';
+import { gte, lt } from 'semver';
+import { prompt } from 'enquirer';
 
 export async function applicationGenerator(
   tree: Tree,
@@ -46,6 +47,18 @@ export async function applicationGenerator(
     You can resolve this error by removing the "standalone" option or by migrating to Angular 14.1.0.`);
   }
 
+  if (
+    gte(installedAngularVersionInfo.version, '14.1.0') &&
+    schema.standalone === undefined &&
+    process.env.NX_INTERACTIVE === 'true'
+  ) {
+    schema.standalone = await prompt({
+      name: 'standalone-components',
+      message: 'Would you like to use Standalone Components?',
+      type: 'confirm',
+    });
+  }
+
   const generatorDirectory =
     getGeneratorDirectoryForInstalledAngularVersion(tree);
   if (generatorDirectory) {

diff --git a/packages/angular/src/generators/application/schema.json b/packages/angular/src/generators/application/schema.json
@@ -151,7 +151,7 @@
     "standalone": {
       "description": "Generate an application that is setup to use standalone components. _Note: This is only supported in Angular versions >= 14.1.0_",
       "type": "boolean",
-      "default": false
+      "x-priority": "important"
     },
     "rootProject": {
       "description": "Create an application at the root of the workspace.",

diff --git a/packages/angular/src/generators/host/host.ts b/packages/angular/src/generators/host/host.ts
@@ -37,6 +37,7 @@ export async function host(tree: Tree, options: Schema) {
 
   const appInstallTask = await applicationGenerator(tree, {
     ...options,
+    standalone: options.standalone ?? false,
     routing: true,
     port: 4200,
     skipFormat: true,

diff --git a/packages/angular/src/generators/remote/remote.ts b/packages/angular/src/generators/remote/remote.ts
@@ -29,6 +29,7 @@ export async function remote(tree: Tree, options: Schema) {
 
   const appInstallTask = await applicationGenerator(tree, {
     ...options,
+    standalone: options.standalone ?? false,
     routing: true,
     port,
   });

diff --git a/scripts/depcheck/missing.ts b/scripts/depcheck/missing.ts
@@ -52,6 +52,7 @@ const IGNORE_MATCHES_IN_PACKAGE = {
     'sass',
     'stylus',
     'tailwindcss',
+    'enquirer',
   ],
   cli: ['nx'],
   cypress: ['cypress', '@angular-devkit/schematics', '@nrwl/cypress', 'vite'],