feat(@angular/cli): add prompts on missing builder targets

With this change we add prompts to `ng deploy` and `ng e2e` to facilitate adding packages that offer these capabalities.

We also add back `ng lint` prompt to add ESLint which was removed by mistake during the commands refactoring.

Author: alan-agius4

packages/angular/cli/src/command-builder/architect-base-command-module.ts

@@ -9,9 +9,12 @@
 import { Architect, Target } from '@angular-devkit/architect';
 import { WorkspaceNodeModulesArchitectHost } from '@angular-devkit/architect/node';
 import { json } from '@angular-devkit/core';
+import { spawnSync } from 'child_process';
 import { existsSync } from 'fs';
 import { resolve } from 'path';
 import { isPackageNameSafeForAnalytics } from '../analytics/analytics';
+import { askConfirmation, askQuestion } from '../utilities/prompt';
+import { isTTY } from '../utilities/tty';
 import {
   CommandModule,
   CommandModuleError,
@@ -21,13 +24,18 @@ import {
 } from './command-module';
 import { Option, parseJsonSchemaToOptions } from './utilities/json-schema';
 
+export interface MissingTargetChoice {
+  name: string;
+  value: string;
+}
+
 export abstract class ArchitectBaseCommandModule<T>
   extends CommandModule<T>
   implements CommandModuleImplementation<T>
 {
   static override scope = CommandScope.In;
   protected override shouldReportAnalytics = false;
-  protected readonly missingErrorTarget: string | undefined;
+  protected readonly missingTargetChoices: MissingTargetChoice[] | undefined;
 
   protected async runSingleTarget(target: Target, options: OtherOptions): Promise<number> {
     const architectHost = await this.getArchitectHost();
@@ -36,7 +44,7 @@ export abstract class ArchitectBaseCommandModule<T>
     try {
       builderName = await architectHost.getBuilderNameForTarget(target);
     } catch (e) {
-      throw new CommandModuleError(this.missingErrorTarget ?? e.message);
+      return this.onMissingTarget(e.message);
     }
 
     await this.reportAnalytics({
@@ -137,4 +145,77 @@ export abstract class ArchitectBaseCommandModule<T>
       `Node packages may not be installed. Try installing with '${this.context.packageManager} install'.`,
     );
   }
+
+  protected getArchitectTarget(): string {
+    return this.commandName;
+  }
+
+  protected async onMissingTarget(defaultMessage: string): Promise<1> {
+    const { logger } = this.context;
+    const choices = this.missingTargetChoices;
+
+    if (!choices?.length) {
+      logger.error(defaultMessage);
+
+      return 1;
+    }
+
+    const missingTargetMessage =
+      `Cannot find "${this.getArchitectTarget()}" target for the specified project.\n` +
+      `You can add a package that implements these capabilities.\n\n` +
+      `For example:\n` +
+      choices.map(({ name, value }) => `  ${name}: ng add ${value}`).join('\n') +
+      '\n';
+
+    if (isTTY()) {
+      // Use prompts to ask the user if they'd like to install a package.
+      logger.warn(missingTargetMessage);
+
+      const packageToInstall = await this.getMissingTargetPackageToInstall(choices);
+      if (packageToInstall) {
+        // Example run: `ng add @angular-eslint/schematics`.
+        const binPath = resolve(__dirname, '../../bin/ng.js');
+        const { error } = spawnSync(process.execPath, [binPath, 'add', packageToInstall], {
+          stdio: 'inherit',
+        });
+
+        if (error) {
+          throw error;
+        }
+      }
+    } else {
+      // Non TTY display error message.
+      logger.error(missingTargetMessage);
+    }
+
+    return 1;
+  }
+
+  private async getMissingTargetPackageToInstall(
+    choices: MissingTargetChoice[],
+  ): Promise<string | null> {
+    if (choices.length === 1) {
+      // Single choice
+      const { name, value } = choices[0];
+      if (await askConfirmation(`Would you like to add ${name} now?`, true, false)) {
+        return value;
+      }
+
+      return null;
+    }
+
+    // Multiple choice
+    return askQuestion(
+      `Would you like to add a package with "${this.getArchitectTarget()}" capabilities now?`,
+      [
+        {
+          name: 'No',
+          value: null,
+        },
+        ...choices,
+      ],
+      0,
+      null,
+    );
+  }
 }

packages/angular/cli/src/command-builder/architect-command-module.ts

@@ -70,9 +70,7 @@ export abstract class ArchitectCommandModule
       let result = 0;
       const projectNames = this.getProjectNamesByTarget(target);
       if (!projectNames) {
-        throw new CommandModuleError(
-          this.missingErrorTarget ?? 'Cannot determine project or target for command.',
-        );
+        return this.onMissingTarget('Cannot determine project or target for command.');
       }
 
       for (const project of projectNames) {
@@ -107,10 +105,6 @@ export abstract class ArchitectCommandModule
     return projectFromTarget?.length ? projectFromTarget[0] : undefined;
   }
 
-  private getArchitectTarget(): string {
-    return this.commandName;
-  }
-
   @memoize
   private getProjectNamesByTarget(target: string): string[] | undefined {
     const workspace = this.getWorkspaceOrThrow();

packages/angular/cli/src/commands/deploy/cli.ts

@@ -6,27 +6,42 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import { tags } from '@angular-devkit/core';
 import { join } from 'path';
+import { MissingTargetChoice } from '../../command-builder/architect-base-command-module';
 import { ArchitectCommandModule } from '../../command-builder/architect-command-module';
 import { CommandModuleImplementation } from '../../command-builder/command-module';
 
 export class DeployCommandModule
   extends ArchitectCommandModule
   implements CommandModuleImplementation
 {
-  override missingErrorTarget = tags.stripIndents`
-  Cannot find "deploy" target for the specified project.
-
-  You should add a package that implements deployment capabilities for your
-  favorite platform.
-  
-  For example:
-    ng add @angular/fire
-    ng add @azure/ng-deploy
-  
-  Find more packages on npm https://www.npmjs.com/search?q=ng%20deploy
-  `;
+  // The below choices should be kept in sync with the list in https://angular.io/guide/deployment
+  override missingTargetChoices: MissingTargetChoice[] = [
+    {
+      name: 'Amazon S3',
+      value: '@jefiozie/ngx-aws-deploy',
+    },
+    {
+      name: 'Azure',
+      value: '@azure/ng-deploy',
+    },
+    {
+      name: 'Firebase',
+      value: '@angular/fire',
+    },
+    {
+      name: 'Netlify',
+      value: '@netlify-builder/deploy',
+    },
+    {
+      name: 'NPM',
+      value: 'ngx-deploy-npm',
+    },
+    {
+      name: 'GitHub Pages',
+      value: 'angular-cli-ghpages',
+    },
+  ];
 
   multiTarget = false;
   command = 'deploy [project]';

packages/angular/cli/src/commands/e2e/cli.ts

@@ -6,28 +6,30 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import { tags } from '@angular-devkit/core';
+import { MissingTargetChoice } from '../../command-builder/architect-base-command-module';
 import { ArchitectCommandModule } from '../../command-builder/architect-command-module';
 import { CommandModuleImplementation } from '../../command-builder/command-module';
 
 export class E2eCommandModule
   extends ArchitectCommandModule
   implements CommandModuleImplementation
 {
-  multiTarget = true;
-  override missingErrorTarget = tags.stripIndents`
-  Cannot find "e2e" target for the specified project.
-
-  You should add a package that implements end-to-end testing capabilities.
-
-  For example:
-    Cypress: ng add @cypress/schematic
-    Nightwatch: ng add @nightwatch/schematics
-    WebdriverIO: ng add @wdio/schematics
-
-  More options will be added to the list as they become available.
-  `;
+  override missingTargetChoices: MissingTargetChoice[] = [
+    {
+      name: 'Cypress',
+      value: '@cypress/schematic',
+    },
+    {
+      name: 'Nightwatch',
+      value: '@nightwatch/schematics',
+    },
+    {
+      name: 'WebdriverIO',
+      value: '@wdio/schematics',
+    },
+  ];
 
+  multiTarget = true;
   command = 'e2e [project]';
   aliases = ['e'];
   describe = 'Builds and serves an Angular application, then runs end-to-end tests.';

packages/angular/cli/src/commands/lint/cli.ts

@@ -6,23 +6,21 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import { tags } from '@angular-devkit/core';
 import { join } from 'path';
+import { MissingTargetChoice } from '../../command-builder/architect-base-command-module';
 import { ArchitectCommandModule } from '../../command-builder/architect-command-module';
 import { CommandModuleImplementation } from '../../command-builder/command-module';
 
 export class LintCommandModule
   extends ArchitectCommandModule
   implements CommandModuleImplementation
 {
-  override missingErrorTarget = tags.stripIndents`
-  Cannot find "lint" target for the specified project.
-  
-  You should add a package that implements linting capabilities.
-  
-  For example:
-    ng add @angular-eslint/schematics
-  `;
+  override missingTargetChoices: MissingTargetChoice[] = [
+    {
+      name: 'ESLint',
+      value: '@angular-eslint/schematics',
+    },
+  ];
 
   multiTarget = true;
   command = 'lint [project]';

packages/angular/cli/src/utilities/prompt.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import type { Question } from 'inquirer';
+import type { ListChoiceOptions, ListQuestion, Question } from 'inquirer';
 import { isTTY } from './tty';
 
 export async function askConfirmation(
@@ -30,3 +30,27 @@ export async function askConfirmation(
 
   return answers['confirmation'];
 }
+
+export async function askQuestion(
+  message: string,
+  choices: ListChoiceOptions[],
+  defaultResponseIndex: number,
+  noTTYResponse: null | string,
+): Promise<string | null> {
+  if (!isTTY()) {
+    return noTTYResponse;
+  }
+  const question: ListQuestion = {
+    type: 'list',
+    name: 'answer',
+    prefix: '',
+    message,
+    choices,
+    default: defaultResponseIndex,
+  };
+
+  const { prompt } = await import('inquirer');
+  const answers = await prompt([question]);
+
+  return answers['answer'];
+}

tests/legacy-cli/e2e/tests/misc/ask-missing-builder.ts

@@ -0,0 +1,31 @@
+import { execWithEnv, killAllProcesses, waitForAnyProcessOutputToMatch } from '../../utils/process';
+
+export default async function () {
+  try {
+    // Execute a command with TTY force enabled
+    execWithEnv('ng', ['deploy'], {
+      ...process.env,
+      NG_FORCE_TTY: '1',
+      NG_CLI_ANALYTICS: 'false',
+    });
+
+    // Check if the prompt is shown
+    await waitForAnyProcessOutputToMatch(
+      /Would you like to add a package with "deploy" capabilities/,
+    );
+
+    killAllProcesses();
+
+    // Execute a command with TTY force enabled
+    execWithEnv('ng', ['lint'], {
+      ...process.env,
+      NG_FORCE_TTY: '1',
+      NG_CLI_ANALYTICS: 'false',
+    });
+
+    // Check if the prompt is shown
+    await waitForAnyProcessOutputToMatch(/Would you like to add ESLint now/);
+  } finally {
+    killAllProcesses();
+  }
+}