How can I use this with ng standalone?

[obabac]

What I did:

1. Install the Necessary Packages

npm install @jufab/opentelemetry-angular-interceptor @opentelemetry/api

2. Create a Custom Module for OpenTelemetry Standalone components don't directly support ModuleWithProviders types in the imports array. To work around this, create a separate Angular module to handle the OpenTelemetry configuration:

import { NgModule } from '@angular/core';
import {
    CompositePropagatorModule, OpenTelemetryConfig,
    OpenTelemetryInterceptorModule,
    OtelColExporterModule
} from "@jufab/opentelemetry-angular-interceptor";

const otelConfig: OpenTelemetryConfig = {
    commonConfig: {
        console: true,
        production: false,
        serviceName: 'demo-ui',
        resourceAttributes: {
            'service.name': 'Demo-UI',
        },
        logBody: true,
        probabilitySampler: '1',
        logLevel: DiagLogLevel.ALL,
    },
    otelcolConfig: {
        url: 'http://localhost:5080/api/default/traces',
        timeoutMillis: 10000,
        headers: {
            'Authorization': 'Basic dd9vdEBleGFtcGxlLmNvbTpDb21wbGV4cGFzcyMxMjM=',
        }
    }
};

@NgModule({
    imports: [
        OpenTelemetryInterceptorModule.forRoot(otelConfig),
        OtelColExporterModule,
        CompositePropagatorModule,
    ],
})
export class OpenTelemetryModule {
    constructor() {
        console.log('OpenTelemetryModule initialized');
    }
}

3. Import the Module in Your Standalone Component In your standalone component, import this module:

import { Component } from '@angular/core';
import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
import { OpenTelemetryModule } from './open-telemetry.module';

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    standalone: true,
    imports: [
        IonApp, IonRouterOutlet,
        OpenTelemetryModule  // Import the custom OpenTelemetry module here
    ]
})
export class AppComponent {
    constructor() {
        console.log('AppComponent initialized with OpenTelemetry');
    }
}

This approach doesn't work for me. It does not intercept my requests neither does it send any trace. The modules seems to get initialized (see the console log) though. Any help would be appreciated

[obabac]

I found a solution. No NgModule needed

Add this to your app.config.ts:

            provideAnimations(),
            provideRouter(routes, withComponentInputBinding()),
            provideHttpClient(withInterceptorsFromDi(), withFetch()),
...
            importProvidersFrom(OpenTelemetryInterceptorModule.forRoot(config)),
            importProvidersFrom(OtelColExporterModule),
            importProvidersFrom(W3CTraceContextPropagatorModule)

and it should work as expected with the OpenTelemetryInterceptorModule. But I cannot get OtelWebTracerModule to work for the Instrumentation though:

            provideAnimations(),
            provideRouter(routes, withComponentInputBinding()),
            provideHttpClient(withInterceptorsFromDi(), withFetch()),
...
            {
                provide: OTEL_INSTRUMENTATION_PLUGINS,
                useValue: [new XMLHttpRequestInstrumentation()]
            },
            importProvidersFrom(OtelWebTracerModule.forRoot(config)),
            importProvidersFrom(OtelColExporterModule),
            importProvidersFrom(W3CTraceContextPropagatorModule)