feat(angular): Add Angular menu option and install SDK (#765)

Adds Angular menu option with SDK installation

---------

Co-authored-by: Andrei <[email protected]>

lib/Constants.ts

@@ -4,6 +4,7 @@ export enum Integration {
   ios = 'ios',
   android = 'android',
   cordova = 'cordova',
+  angular = 'angular',
   electron = 'electron',
   nextjs = 'nextjs',
   nuxt = 'nuxt',
@@ -68,6 +69,8 @@ export function mapIntegrationToPlatform(type: string): string | undefined {
       return 'react-native';
     case Integration.cordova:
       return 'cordova';
+    case Integration.angular:
+      return 'javascript-angular';
     case Integration.electron:
       return 'javascript-electron';
     case Integration.nextjs:

src/angular/angular-wizard.ts

@@ -0,0 +1,114 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+
+// @ts-expect-error - clack is ESM and TS complains about that. It works though
+import clack from '@clack/prompts';
+
+import chalk from 'chalk';
+import type { WizardOptions } from '../utils/types';
+import { withTelemetry } from '../telemetry';
+import {
+  abortIfCancelled,
+  confirmContinueIfNoOrDirtyGitRepo,
+  ensurePackageIsInstalled,
+  getPackageDotJson,
+  installPackage,
+  printWelcome,
+} from '../utils/clack-utils';
+import { getPackageVersion, hasPackageInstalled } from '../utils/package-json';
+import { gte, minVersion, SemVer } from 'semver';
+
+import * as Sentry from '@sentry/node';
+
+const MIN_SUPPORTED_ANGULAR_VERSION = '14.0.0';
+
+export async function runAngularWizard(options: WizardOptions): Promise<void> {
+  return withTelemetry(
+    {
+      enabled: options.telemetryEnabled,
+      integration: 'angular',
+      wizardOptions: options,
+    },
+    () => runAngularWizardWithTelemetry(options),
+  );
+}
+
+async function runAngularWizardWithTelemetry(
+  options: WizardOptions,
+): Promise<void> {
+  printWelcome({
+    wizardName: 'Sentry Angular Wizard',
+    promoCode: options.promoCode,
+    telemetryEnabled: options.telemetryEnabled,
+  });
+
+  await confirmContinueIfNoOrDirtyGitRepo();
+
+  const packageJson = await getPackageDotJson();
+
+  await ensurePackageIsInstalled(packageJson, '@angular/core', 'Angular');
+
+  let installedAngularVersion = getPackageVersion('@angular/core', packageJson);
+
+  if (!installedAngularVersion) {
+    clack.log.warn('Could not determine installed Angular version.');
+
+    installedAngularVersion = await abortIfCancelled(
+      clack.text({
+        message: `Please enter your installed Angular major version (e.g. ${chalk.cyan(
+          '18',
+        )} for Angular 18)`,
+        validate(value) {
+          if (!value) {
+            return 'Angular version is required';
+          }
+
+          try {
+            if (!minVersion(value)) {
+              return `Invalid Angular version provided: ${value}`;
+            }
+          } catch (error) {
+            return `Invalid Angular version provided: ${value}`;
+          }
+        },
+      }),
+    );
+  }
+
+  Sentry.setTag('angular-version', installedAngularVersion);
+
+  const installedMinVersion = minVersion(installedAngularVersion) as SemVer;
+
+  const isSupportedAngularVersion = gte(
+    installedMinVersion,
+    MIN_SUPPORTED_ANGULAR_VERSION,
+  );
+
+  if (!isSupportedAngularVersion) {
+    clack.log.warn(
+      `Angular version ${chalk.cyan(
+        MIN_SUPPORTED_ANGULAR_VERSION,
+      )} or higher is required.`,
+    );
+    clack.log.warn(
+      `Please refer to Sentry's version compatibility table for more information:
+${chalk.underline(
+  'https://docs.sentry.io/platforms/javascript/guides/angular/#angular-version-compatibility',
+)}`,
+    );
+
+    return;
+  }
+
+  const sdkAlreadyInstalled = hasPackageInstalled(
+    '@sentry/angular',
+    packageJson,
+  );
+
+  Sentry.setTag('sdk-already-installed', sdkAlreadyInstalled);
+
+  await installPackage({
+    packageName: '@sentry/angular@^8',
+    packageNameDisplayLabel: '@sentry/angular',
+    alreadyInstalled: sdkAlreadyInstalled,
+  });
+}

src/run.ts

@@ -6,6 +6,7 @@ import { runReactNativeWizard } from './react-native/react-native-wizard';
 import { run as legacyRun } from '../lib/Setup';
 import type { PreselectedProject, WizardOptions } from './utils/types';
 import { runAndroidWizard } from './android/android-wizard';
+import { runAngularWizard } from './angular/angular-wizard';
 import { runAppleWizard } from './apple/apple-wizard';
 import { runNextjsWizard } from './nextjs/nextjs-wizard';
 import { runNuxtWizard } from './nuxt/nuxt-wizard';
@@ -17,6 +18,7 @@ import type { Platform } from '../lib/Constants';
 import type { PackageDotJson } from './utils/package-json';
 
 type WizardIntegration =
+  | 'angular'
   | 'reactNative'
   | 'ios'
   | 'android'
@@ -101,6 +103,7 @@ export async function run(argv: Args) {
         options: [
           { value: 'reactNative', label: 'React Native' },
           { value: 'ios', label: 'iOS' },
+          { value: 'angular', label: 'Angular' },
           { value: 'android', label: 'Android' },
           { value: 'cordova', label: 'Cordova' },
           { value: 'electron', label: 'Electron' },
@@ -147,6 +150,10 @@ export async function run(argv: Args) {
       await runAndroidWizard(wizardOptions);
       break;
 
+    case 'angular':
+      await runAngularWizard(wizardOptions);
+      break;
+
     case 'nextjs':
       await runNextjsWizard(wizardOptions);
       break;

src/utils/clack-utils.ts

@@ -875,6 +875,7 @@ export function isUsingTypeScript() {
 export async function getOrAskForProjectData(
   options: WizardOptions,
   platform?:
+    | 'javascript-angular'
     | 'javascript-nextjs'
     | 'javascript-nuxt'
     | 'javascript-remix'
@@ -1037,6 +1038,7 @@ async function askForWizardLogin(options: {
   url: string;
   promoCode?: string;
   platform?:
+    | 'javascript-angular'
     | 'javascript-nextjs'
     | 'javascript-nuxt'
     | 'javascript-remix'