Is it compatible with angular 17 ?

[vikrantgupta25]

I am trying to use the package with angular 17

package.json

{
  "name": "sample",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^17.1.0",
    "@angular/common": "^17.1.0",
    "@angular/compiler": "^17.1.0",
    "@angular/core": "^17.1.0",
    "@angular/forms": "^17.1.0",
    "@angular/platform-browser": "^17.1.0",
    "@angular/platform-browser-dynamic": "^17.1.0",
    "@angular/router": "^17.1.0",
    "@jufab/opentelemetry-angular-interceptor": "^1.7.0-1",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.1.2",
    "@angular/cli": "^17.1.2",
    "@angular/compiler-cli": "^17.1.0",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.3.2"
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import {
  CompositePropagatorModule,
  OpenTelemetryInterceptorModule,
  OtelColExporterModule,
} from '@jufab/opentelemetry-angular-interceptor';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    OpenTelemetryInterceptorModule.forRoot({
      commonConfig: {
        // This helps in development mode to check the traces in console
        console: true,
        // This flag determines whether the application is running in production mode or not
        production: false,
        logBody: true,
        // Service name should be passed else we would see the default unknown service name in traces
        serviceName: 'angular-app',
        // this defines the ratio of traces we want to sample
        probabilitySampler: '0.7',
      },
      otelcolConfig: {
        url: 'URL here ',
        headers: {
         // headers here
        },
      },
    }),
    // the default OTEL exporter module
    OtelColExporterModule,
    // this takes care of the context propagation
    CompositePropagatorModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

But when I run the application the trace API calls get cancelled automatically , Can you please help with the same Thanks!

[jufab]

Hi @Vikrant2520,

In your configuration, you have : otelcolConfig: { url: 'URL here ', may generate 404.

And you have an probabilitySampler at 0.7, so you may have 70% call traced only

[jufab]

And yes it works: I tried with new release 1.8.0 on angular 17