feat(angular): Update Angular docs for v7 release (#4963)

This PR updates our Angular SDK docs for the v7 release. It adds information about compatibility of our SDK with different Angular versions and updates information on `TraceDirective` compatibility.

Author: Lms24

src/includes/getting-started-install/javascript.angular.mdx

@@ -5,3 +5,14 @@ npm install --save @sentry/angular @sentry/tracing
 ```bash {tabTitle:Yarn}
 yarn add @sentry/angular @sentry/tracing
 ```
+
+<Alert level="info" title="Angular Version Compatibility" >
+
+The latest version of the Sentry Angular SDK officially supports Angular 10 and newer.
+If you need to use Angular 9 or older and you experience problems with the latest version of the Sentry SDK,
+try downgrading the SDK to version 6 (`@sentry/angular@^6.x`). If you are using Sentry Tracing,
+be sure to also downgrade it to the same version (`@sentry/tracing@^6.x`).
+Version 6 of the Sentry SDK was compiled differently and might work with older versions of Angular.
+Please note that this combination of packages is not being maintained or tested.
+
+</Alert>

src/platforms/javascript/guides/angular/components/tracehelpers.mdx

@@ -4,7 +4,42 @@ title: Track Angular Components
 
 To track Angular components as part of your transactions, use any of these three options:
 
-1. `TraceClassDecorator` tracks a duration between `OnInit` and `AfterViewInit` lifecycle hooks in components:
+1. `TraceDirective` tracks a duration between `OnInit` and `AfterViewInit` lifecycle hooks in template:
+
+Import `TraceModule` either globally in your application's `app.module.ts` file or locally in the module(s)
+you want to track your components:
+
+```javascript
+import * as Sentry from "@sentry/angular";
+
+@NgModule({
+  // ...
+  imports: [Sentry.TraceModule],
+  // ...
+})
+export class AppModule {}
+```
+
+Then, inside your components template, (remember that the directive name attribute is required):
+
+```html
+<app-header [trace]="'header'"></app-header>
+<articles-list [trace]="'articles-list'"></articles-list>
+<app-footer [trace]="'footer'"></app-footer>
+```
+
+<Alert level="info" title="Compatibility">
+
+If you're using version 6 of the Angular SDK, using `TraceDirective` or `TraceModule` causes a
+compiler error at application compile time of your Angular application. This is a [known issue](https://github.com/getsentry/sentry-javascript/issues/3282)
+of our Angular SDK v6 and it was [fixed](https://github.com/getsentry/sentry-javascript/issues/4644)
+in v7 of our Angular SDK. We recommend upgrading to the latest Angular SDK version.
+Otherwise, please use options 2 (`TraceClassDecorator`) and 3 (`TraceMethodDecorator`)
+below to track your Angular components.
+
+</Alert>
+
+2. `TraceClassDecorator` tracks a duration between `OnInit` and `AfterViewInit` lifecycle hooks in components:
 
 ```javascript
 import { Component } from "@angular/core";
@@ -20,7 +55,7 @@ export class HeaderComponent {
 }
 ```
 
-2. `TraceMethodDecorator` tracks a specific lifecycle hooks as point-in-time spans in components:
+3. `TraceMethodDecorator` tracks a specific lifecycle hooks as point-in-time spans in components:
 
 ```javascript
 import { Component, OnInit } from "@angular/core";
@@ -40,20 +75,20 @@ You can also add your own custom spans by attaching them to the current active t
 helper. For example, to track the duration of the Angular bootstraping process:
 
 ```javascript
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import * as Sentry from '@sentry/angular';
+import { enableProdMode } from "@angular/core";
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+import * as Sentry from "@sentry/angular";
 
-import { AppModule } from './app/app.module';
+import { AppModule } from "./app/app.module";
 
 // ...
 
 const activeTransaction = Sentry.getActiveTransaction();
 const bootstrapSpan =
   activeTransaction &&
   activeTransaction.startChild({
-    description: 'platform-browser-dynamic',
-    op: 'ui.angular.bootstrap',
+    description: "platform-browser-dynamic",
+    op: "ui.angular.bootstrap",
   });
 
 platformBrowserDynamic()
@@ -66,39 +101,3 @@ platformBrowserDynamic()
     }
   });
 ```
-
-3. `TraceDirective` tracks a duration between `OnInit` and `AfterViewInit` lifecycle hooks in template:
-
-<Alert level="warning" title="Important">
-
-Using `TraceDirective` or `TraceModule` currently causes a compiler error at application compile
-time of your Angular application if AOT compilation is enabled in your application config (which it is by default).
-This is a [known limitation](https://github.com/getsentry/sentry-javascript/issues/3282) of our current
-Angular SDK (v6.*) and it will be [adressed and fixed](https://github.com/getsentry/sentry-javascript/issues/4644)
-in our next major Angular SDK release (v7).
-In the meantime, please use options 1 (`TraceClassDecorator`) and 2 (`TraceMethodDecorator`)
-above to track your Angular components.
-
-</Alert>
-
-Import `TraceModule` either globally in your application's `app.module.ts` file or locally in the module(s)
-you want to track your components:
-
-```javascript
-import * as Sentry from "@sentry/angular";
-
-@NgModule({
-  // ...
-  imports: [Sentry.TraceModule],
-  // ...
-})
-export class AppModule {}
-```
-
-Then, inside your components template, (remember that the directive name attribute is required):
-
-```html
-<app-header [trace]="'header'"></app-header>
-<articles-list [trace]="'articles-list'"></articles-list>
-<app-footer [trace]="'footer'"></app-footer>
-```