Is it compatible with Angular v16 and NX

[Choupa-web]

Hello, I would like to use opentelemetry-angular-interceptor into my angular app. When I run ng serve or nx run-many --target=serve --all I've got following error :

Error: node_modules/@types/node/globals.d.ts:72:13 - error TS2403: Subsequent variable declarations must have the same type. Variable 'AbortSignal' must be of type '{ new (): AbortSignal; prototype: AbortSignal; abort(reason?: any): AbortSignal; timeout(milliseconds: number): AbortSignal; }', but here has type '{ new (): AbortSignal; prototype: AbortSignal; }'. 72 declare var AbortSignal: { ~~~~~~~~~~~ node_modules/typescript/lib/lib.dom.d.ts:2304:13 2304 declare var AbortSignal: { ~~~~~~~~~~~ 'AbortSignal' was also declared here.

### Here is my app.module.ts file :

import { CompositePropagatorModule, OpenTelemetryConfig, OTEL_CONFIG, OtelColExporterModule, OtelWebTracerModule } from "@jufab/opentelemetry-angular-interceptor"; const keycloakService: KeycloakService = new KeycloakService(); const openTelemetryConfig: OpenTelemetryConfig = { commonConfig: { console: true, // Display trace on console (only in DEV env) production: false, // Send Trace with BatchSpanProcessor (true) or SimpleSpanProcessor (false) serviceName: 'Evercampaign front app', // Service name send in trace probabilitySampler: '1', }, otelcolConfig: { url: 'http://tempo-gateway.monitoring.svc.cluster.local/otlp/v1/traces', // URL of opentelemetry collector } }; @NgModule({ declarations: [AppComponent, NotFoundComponent], schemas: [NO_ERRORS_SCHEMA], imports: [ AppRoutingModule, KeycloakAngularModule, HttpClientModule, TranslocoModule, AppMaterialModule, BboxMenuModule, BboxHeaderModule, BboxProgressSpinnerBarModule, FlexModule, BboxErrorPageModule, AllRecommendationsModule, ToastrModule.forRoot(ToasterGlobalCfg), BrowserAnimationsModule, FontAwesomeModule, TranslocoRootModule, BboxFooterModule, BboxUtilsModule, OtelWebTracerModule.forRoot( undefined, {provide: OTEL_CONFIG, useFactory: () => (openTelemetryConfig)} ), //Insert OtelCol exporter module OtelColExporterModule, //Insert propagator module CompositePropagatorModule, ], providers: [ { provide: KeycloakService, useValue: keycloakService }, { provide: HTTP_INTERCEPTORS, useClass: GraviteeAPIInterceptor, multi: true }, { provide: HTTP_INTERCEPTORS, useClass: BboxSpinnerLoaderInterceptor, multi: true }, HttpCancelService, { provide: HTTP_INTERCEPTORS, useClass: ManageHttpInterceptor, multi: true }, { provide: MatPaginatorIntl, useClass: MatPaginatorIntlCustomService }, { provide: TRANSLOCO_MISSING_HANDLER, useClass: CustomHandler } ] }) export class AppModule implements DoBootstrap { constructor(hateoasConfig: NgxHateoasClientConfigurationService) { // DM-4106 // API is exposed through this apm instance hateoasConfig.configure({ http: { defaultRoute: { proxyUrl: ${environment.baseUrlRefclearing}, rootUrl: ${environment.baseUrlRefclearing} }, anotherRoute: { rootUrl: ${environment.apimUrl}/api } }, useTypes: { resources: [Code] }, logs: { verboseLogs: false } }); } ngDoBootstrap(appRef: ApplicationRef): void { const {keycloakConfig} = environment; // A commenter si on ne veut pas passerpar keycloak keycloakService .init({ config: keycloakConfig, initOptions: { onLoad: 'login-required', checkLoginIframe: false }, loadUserProfileAtStartUp: true, bearerExcludedUrls: [] }) .then(() => { console.log('[ngDoBootstrap] bootstrap app'); appRef.bootstrap(AppComponent); }) .catch(error => console.error('[ngDoBootstrap] init Keycloak failed', error)); // appRef.bootstrap(AppComponent); // A décommenter si on utilise pas Keycloack } }

### Here is my package.json:

"dependencies": { "@angular-architects/module-federation": "16.0.4", "@angular/animations": "16.1.5", "@angular/cdk": "16.1.5", "@angular/common": "16.1.5", "@angular/compiler": "16.1.5", "@angular/core": "16.1.5", "@angular/flex-layout": "15.0.0-beta.42", "@angular/forms": "16.1.5", "@angular/material": "16.1.5", "@angular/platform-browser": "16.1.5", "@angular/platform-browser-dynamic": "16.1.5", "@angular/router": "16.1.5", "@codewithdan/observable-store": "2.2.15", "@fortawesome/angular-fontawesome": "0.13.0", "@fortawesome/fontawesome-svg-core": "6.4.0", "@fortawesome/free-solid-svg-icons": "6.4.0", "@jufab/opentelemetry-angular-interceptor": "^1.4.1-3", "@lagoshny/ngx-hateoas-client": "3.6.0", "@ng-select/ng-select": "11.0.0", "@ngneat/dirty-check-forms": "3.0.3", "@ngneat/elf": "2.3.2", "@ngneat/elf-cli-ng": "1.0.0", "@ngneat/elf-persist-state": "1.1.6", "@ngneat/transloco": "4.3.0", "@ngneat/transloco-locale": "4.1.0", "@nx/angular": "16.5.3", "@opentelemetry/api": "^1.4.1", "@opentelemetry/context-zone-peer-dep": "^1.15.0", "@opentelemetry/exporter-trace-otlp-http": "^0.41.0", "@opentelemetry/exporter-zipkin": "^1.15.0", "@opentelemetry/instrumentation": "^0.41.0", "@opentelemetry/propagator-aws-xray": "^1.3.0", "@opentelemetry/propagator-b3": "^1.15.0", "@opentelemetry/propagator-jaeger": "^1.15.0", "@opentelemetry/sdk-trace-base": "^1.15.0", "@opentelemetry/sdk-trace-web": "^1.15.0", "chart.js": "4.3.0", "detect-passive-events": "2.0.3", "hash-sum": "2.0.0", "keycloak-angular": "14.0.0", "keycloak-js": "22.0.1", "luxon": "3.3.0", "ng2-charts": "4.1.1", "ngx-clipboard": "16.0.0", "ngx-mat-select-search": "7.0.2", "ngx-toastr": "17.0.2", "npm": "9.8.0", "rxjs": "7.8.1", "tslib": "2.6.0", "zone.js": "0.13.1" }, "devDependencies": { "@angular-devkit/architect": "0.1601.4", "@angular-devkit/build-angular": "16.1.4", "@angular-devkit/core": "16.1.4", "@angular-devkit/schematics": "16.1.4", "@angular-eslint/builder": "16.1.0", "@angular-eslint/eslint-plugin": "16.1.0", "@angular-eslint/eslint-plugin-template": "16.1.0", "@angular-eslint/template-parser": "16.1.0", "@angular/cli": "16.1.4", "@angular/compiler-cli": "16.1.5", "@angular/language-service": "16.1.5", "@compodoc/compodoc": "1.1.21", "@cypress/schematic": "2.5.0", "@juggle/resize-observer": "3.4.0", "@ngneat/spectator": "15.0.1", "@nx/cypress": "16.5.3", "@nx/eslint-plugin": "16.5.3", "@nx/jest": "16.5.3", "@nx/workspace": "16.5.3", "@schematics/angular": "16.1.4", "@types/hash-sum": "1.0.0", "@types/jest": "29.5.3", "@types/luxon": "3.3.0", "@types/node": "17.0.23", "@typescript-eslint/eslint-plugin": "6.1.0", "@typescript-eslint/parser": "6.1.0", "angular-build-info": "2.0.1", "cypress": "12.17.1", "eslint": "8.45.0", "eslint-config-prettier": "8.8.0", "eslint-plugin-cypress": "2.13.3", "eslint-plugin-prettier": "5.0.0", "husky": "8.0.3", "jest": "29.6.1", "jest-environment-jsdom": "29.6.1", "jest-junit": "16.0.0", "jest-preset-angular": "13.1.1", "ngx-build-plus": "16.0.0", "nx": "16.5.3", "prettier": "3.0.0", "pretty-quick": "3.1.3", "protractor": "7.0.0", "resize-observer-polyfill": "1.5.1", "ts-jest": "29.1.1", "ts-node": "10.9.1", "typescript": "5.1.6" }

[jufab]

Hi @Choupa-web, Are you sure this a problem with this lib? I tried with instrumentation and interceptor on Angular 16.1.6 and lib version 1.4.1-3 without any problem. Maybe, try to remove all Opentelemetry ref and this lib and see if you have the same error?

[Choupa-web]

Hello,

Yes when I remove all opentelemetry ref and this lib. No error anymore

[jufab]

Hi @Choupa-web, Sorry for the delay. Do you think you can try with the latest release? (1.8.0)

[jufab]

maybe you have the same problem in issue #166 ?