diff --git a/src/includes/getting-started-install/javascript.angular.mdx b/src/includes/getting-started-install/javascript.angular.mdx
index a566b357945490..dcba832babb2ee 100644
--- a/src/includes/getting-started-install/javascript.angular.mdx
+++ b/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
```
+
+
+
+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.
+
+
diff --git a/src/platforms/javascript/guides/angular/components/tracehelpers.mdx b/src/platforms/javascript/guides/angular/components/tracehelpers.mdx
index 5f3047f4b9500e..a3424941c649bc 100644
--- a/src/platforms/javascript/guides/angular/components/tracehelpers.mdx
+++ b/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
+
+
+
+```
+
+
+
+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.
+
+
+
+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,11 +75,11 @@ 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";
// ...
@@ -52,8 +87,8 @@ 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:
-
-
-
-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.
-
-
-
-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
-
-
-
-```