feat(angular): Replace "Getting Started" with Wizard Quick Start and Manual Setup pages (#13472)

---------

Co-authored-by: Sarah Mischinger <[email protected]>

Author: Lms24

docs/platforms/javascript/guides/angular/index.mdx

@@ -1,80 +1,89 @@
 ---
 title: Angular
-description: 'Angular is a web framework that empowers developers to build fast, reliable applications. Learn how to set it up with Sentry.'
+description: 'Learn how to set up Sentry in your Angular application and capture your first errors.'
 sdk: sentry.javascript.angular
 categories:
   - javascript
   - browser
 ---
 
-<PlatformContent includePath="getting-started-primer" />
+## Prerequisites
 
-<PlatformContent includePath="getting-started-prerequisites" />
+You need:
 
-## Features
+- A Sentry [account](https://sentry.io/signup/) and [project](/product/projects/)
+- Your application up and running
+- Angular version `17.0.0` or above
 
-In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). You can also get to the root of an error or performance issue faster, by watching a video-like reproduction of a user session with [session replay](/product/explore/session-replay/web/getting-started/).
+<Expandable level="warning" title="Are you using Angular 16 or older?">
 
-Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below.
+If you're using Angular 16 or older, install and <PlatformLink to="/manual-setup">Set Up the SDK Manually</PlatformLink>. The Sentry Angular SDK still works for Angular versions 14 and newer but the installation wizards requires
+at least Angular 17.
 
-## Install
+</Expandable>
 
-<OnboardingOptionButtons options={["error-monitoring", "performance", "session-replay"]} />
+## Step 1: Install
 
-Sentry captures data by using an SDK within your application’s runtime.
+To install Sentry, run the following command within your project:
 
-```bash {tabTitle:npm}
-npm install @sentry/angular --save
+```bash
+npx @sentry/wizard@latest -i angular
 ```
 
-```bash {tabTitle:yarn}
-yarn add @sentry/angular
-```
+The wizard then guides you through the setup process, asking you to enable additional (optional) Sentry features for your application beyond error monitoring.
 
-```bash {tabTitle:pnpm}
-pnpm add @sentry/angular
-```
+<PlatformContent includePath="getting-started-features-expandable" />
 
-### Angular Version Compatibility
+This guide assumes that you enable all features and allow the wizard to add an example component to your application. You can add or remove features at any time, but setting them up now will save you the effort of configuring them manually later.
 
-In its current major version, the Sentry Angular SDK only supports Angular 14 and newer.
+<Expandable title="What does the installation wizard change inside your application?">
 
-If you're using an older version of Angular, you also need to use an older version of the SDK. See the table below for compatibility guidance:
+- Adds a `Sentry.init()` call into your `main.ts` file
+- Registers the Sentry `ErrorHandler` and `TraceService` in your `app.config.ts` file
+- Creates `.sentryclirc` with an auth token to upload source maps (this file is automatically added to `.gitignore`)
+- Walks you through enabling source maps upload when making a production build, locally as well as in CI
+- Adds an example component to your application to help verify your Sentry setup
 
-| Angular version | Recommended Sentry SDK                                                                                  |
-| --------------- | ------------------------------------------------------------------------------------------------------- |
-| 14 and newer    | `@sentry/angular`                                                                                       |
-| 12 or 13        | `@sentry/angular-ivy@^7` (see [Note](#what-is-sentryangular-ivy)) \*                                    |
-| 10 or 11        | `@sentry/angular@^7` \*                                                                                 |
-| 9 and below     | `@sentry/angular@^6` \*                                                                                 |
-| AngularJS/1.x   | `@sentry/browser@^6` with the [AngularJS integration](/platforms/javascript/guides/angular/angular1) \* |
+</Expandable>
 
-\* These versions of the SDK are no longer maintained or tested. Version 7 might still receive bug fixes but we don't guarantee support.
+## Step 2: Verify
 
-#### What is `@sentry/angular-ivy`?
+If you haven't tested your Sentry configuration yet, let's do it now. You can confirm that the Sentry SDK is sending data to your Sentry project by using the example component created by the installation wizard:
 
-The `@sentry/angular-ivy` package was an Ivy-compatible version of `@sentry/angular` in version 7 of the SDK. It's recommended to use this package if you're using Angular 12 or 13 to avoid build-time warnings.
-Functionality-wise, it's identical to `@sentry/angular` and you can simply replace all imports of `@sentry/angular` with `@sentry/angular-ivy` in our docs.
-Since version 8, `@sentry/angular-ivy` was [removed and merged](./migration/v7-to-v8/#supported-versions) with `@sentry/angular` which is now Ivy-compatible by default.
+1. Open the page you added the example component to in your browser.
+2. Click the "Throw error" button. This triggers an error.
 
-## Configure
+Sentry captures this error for you. Additionally, the button click starts a trace to measure the time it takes for the error to be thrown.
 
-Configuration should happen as early as possible in your application's lifecycle.
+<Alert level="success" title="Tip">
 
-<PlatformContent includePath="getting-started-config" />
+Don't forget to explore the example component's code in your project to understand what's happening after your button click.
 
-<PlatformContent includePath="getting-started-sourcemaps" />
+</Alert>
 
-## Verify
+### View Captured Data in Sentry
 
-This snippet includes an intentional error, so you can test that everything is working as soon as you set it up.
+Now, head over to your project on [Sentry.io](https://sentry.io) to view the collected data (it takes a couple of moments for the data to appear).
 
-<PlatformContent includePath="getting-started-verify" />
+<PlatformContent includePath="getting-started-browser-sandbox-warning" />
 
-<Alert>
+<PlatformContent includePath="getting-started-verify-locate-data" />
 
-Learn more about manually capturing an error or message in our <PlatformLink to="/usage/">Usage documentation</PlatformLink>.
+## Next Steps
 
-</Alert>
+At this point, you should have integrated Sentry into Angular application and should already be sending error and tracing data to your Sentry project.
+
+Now's a good time to customize your setup and look into more advanced topics.
+Our next recommended steps for you are:
+
+- Extend Sentry to your backend using one of our [SDKs](/)
+- Continue to <PlatformLink to="/configuration">customize your configuration</PlatformLink>
+- Make use of <PlatformLink to="/features">Angular-specific features</PlatformLink>
+- Learn how to <PlatformLink to="/usage">manually capture errors</PlatformLink>
+
+<Expandable permalink={false} title="Are you having problems setting up the SDK?">
+
+- If you encountered issues with our installation wizard, try <PlatformLink to="/manual-setup">setting up Sentry manually</PlatformLink>
+- [Get support](https://sentry.zendesk.com/hc/en-us/)
 
-To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved.
+</Expandable>