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.