Class TraceDirective is neither an Angular component nor directive nor pipe

[SDohle]

• Review the documentation: https://docs.sentry.io/
• Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
• Use the latest release: https://github.com/getsentry/sentry-javascript/releases
• Provide a link to the affected event from your Sentry account

Package + Version

• @sentry/browser
• @sentry/node
• raven-js
• raven-node (raven for node)
• @sentry/angular

Version:

6.2.0

Description

Hi,
I try to use the TraceDirectives in an Angular 9 project. (just a blank project created with angular-cli)
If I declare the TraceDirective like suggested in the manual:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {Router} from '@angular/router';
import * as Sentry from '@sentry/angular';

@NgModule({
  declarations: [Sentry.TraceDirective],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [
    {
      provide: Sentry.TraceService,
      deps: [Router],
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

The Angular compiler complains:

Class TraceDirective is neither an Angular component nor directive nor pipe

That is something I would expect here because usually I would just import the module (exported @NgModule) instead of declaring a directive/component/pipe from a external module again in my own module.

Are Angular applications > 9 not supported by this module?

Thanks & best regards
Steffen

[PixelBumper]

@SDohle We are facing the same issue on angular 8. Did you find a workaround?

[SDohle]

@PixelBumper No. And no reaction from sentry to this issue so far.

[Lertis]

The same for me with Angular 10-11 =(

[kamilogorek]

After some testing, it appears that changing "aot": false in angular.json fixes the issue, however, I cannot understand why it's happening or how to fix it yet.

[SDohle]

it appears that changing "aot": false in angular.json fixes the issue

Disabling aot is not a solution, that makes bigger applications unusable. It' happening because this module is not aot/ivy compatible because it's directives needs to be redeclared in your code which is not allowed by the angular compiler (to enable features like tree shaking, buhnjdling lazy loading).

[kamilogorek]

This tells me nothing, tbh, as I never developed Angular application.

[mackelito]

Are there any updates to this? Is someone from Sentry even looking at it?

[vladanpaunovic]

Hey @mackelito, of course we are looking at all our issues (look how fast I am answering this 😄 ).

I assume you are probably most curious about the time to resolution for this issue. The update is that this is already on our backlog and is being prioritized together with other initiatives that we are looking forward to soon bring to all of you. My rough estimate is that this will be resolved within our March releases.

We will keep this issue open until then and post an update once this is resolved.

[Lms24]

Hi @mackelito, @SDohle, @PixelBumper and everyone else,

thanks for your patience 🙂 I wanted to let you know that we've been investigating this issue in the last days and that we're working on finding a fix. Full transparency here: So far we haven't yet identified our best course of action but here's what we've found out so far:

• This problem can be reproduced - also with Angular 13 projects - and this means that one cannot really use the TraceDirective at the moment.

  • The temporary workaround of setting "aot": false still works but of course is not an acceptable solution.
  • Another possible workaround would be to use TraceClassDecorator as described in our docs. Importing and using this decorator does not cause compiler errors and the components can be found in the event details.

• Our documentation on how to include TraceDirective in Angular projects could be improved in terms of importing TraceModule instead of redeclaring TraceDirective in e.g. AppModule or any other Angular module for that matter.

  • That being said, importing TraceModule currently also yields a slightly different compiler error but we're pretty sure it comes down to the same cause.
  • We will update the docs accordingly once the directive is fixed.

• We believe that the root cause here lies in how we currently compile the Angular SDK. Based on what we've found out so far, we might have to switch to compiling it via the Angular CLI so that it is compatible with Ivy/aot but we still have to sort out specifics and how we integrate this in our monorepo. Furthermore, our plans for v7 have to be taken into consideration as well.

  • Based on our investigation TraceDirective is currently the only item in the Angular SDK that is compromised by this issue.

In case you have suggestions, found other solutions/workarounds or have any other input, please feel free to mention it here. We'll keep you posted.

[Lms24]

Hi everyone,

this issue is tracked in #4644 as our solution will require a build procedure change. This will most likely be introduced with v7.

In the meantime, please use the TraceClassDecorator workaround mentioned in my previous comment.

Please feel free to share your thoughts on our solution in the new issue.

[Lms24]

Our docs are now updated to reflect the current state of TraceDirective and our plans on fixing it in v7.

[Lms24]

Hey everyone, we just released our first v7 beta 7.0.0-beta.0 which fixes this bug by adding the Angular Compiler instead of tsc. Gonna close this issue for now. Let us know when you have questions or feedback regarding this fix or v7.