fix(angular): mention TraceDirective bug and workaround in Angular SDK (#4780)

* fix(angular): mention `TraceDirective` bug and workaround in Angular SDK

Add a warning alert to `tracehelpers.mdx` in the Angular SDK guide to make users
aware that the usage of `TraceDirective` will most likely cause a compiler error
on their end. The alert links to the original issue and our intended fix which
will ship with the v7 major of the JS/Angular SDK.

Fix suboptimal usage instruction of `TraceDirective`: Instead of declaring
`TraceDirective` in the users' Angular module(s), `TraceModule` (which wraps the
directive) should in fact be imported in the module(s). This conforms to the way
how Angular component libraries should be used.

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

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

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

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

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

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

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

Author: Lms24

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

@@ -4,28 +4,7 @@ title: Track Angular Components
 
 To track Angular components as part of your transactions, use any of these three options:
 
-1. `TraceDirective` to track a duration between `OnInit` and `AfterViewInit` lifecycle hooks in template:
-
-```javascript
-import * as Sentry from "@sentry/angular";
-
-@NgModule({
-  // ...
-  declarations: [Sentry.TraceDirective],
-  // ...
-})
-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>
-```
-
-2. `TraceClassDecorator` tracks a duration between `OnInit` and `AfterViewInit` lifecycle hooks in components:
+1. `TraceClassDecorator` tracks a duration between `OnInit` and `AfterViewInit` lifecycle hooks in components:
 
 ```javascript
 import { Component } from "@angular/core";
@@ -41,7 +20,7 @@ export class HeaderComponent {
 }
 ```
 
-3. `TraceMethodDecorator` tracks a specific lifecycle hooks as point-in-time spans in components:
+2. `TraceMethodDecorator` tracks a specific lifecycle hooks as point-in-time spans in components:
 
 ```javascript
 import { Component, OnInit } from "@angular/core";
@@ -87,3 +66,39 @@ 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>
+```