ApplicationInsights-JS: Missing traceparent header when running multiple SDK instances

I am having trouble with properly configuring Application Insights in my Angular web app and getting proper data logged.

I have configured the SDK to log dependencies with W3C tracing like this:

    this.appInsights = new ApplicationInsights({
      config: {
        instrumentationKey: 'XXXXXXXXXXXXXXXXXXXXXX',
        enableAutoRouteTracking: false, // set to true to get a new operation id per page view.
        distributedTracingMode: DistributedTracingModes.W3C, // option to enable W3C distributed tracing
        enableCorsCorrelation: true, // option to enable "traceparent" header in outgoing requests
        correlationHeaderDomains: ['api.at.completely.different.domain.com'], //option to whitelist domains for "traceparent" header inclusion
        namePrefix: "myAppInsights",
        disableAjaxTracking: false, //just to make sure
        maxAjaxCallsPerView: -1,
        maxMessageLimit: 500
      }
    });
    this.appInsights?.loadAppInsights();
    (window as any).myAppInsights= this.appInsights;

I am relying on autocollect of the dependecy data and when I run my app in localhost, the dependency calls contain traceparent header and I can correlate all calls in my App Insights as well in App Insights of the dependency API. All works as it should.

When my application is deployed to TST or PROD, it is loaded by yet another web app that has its own Application Insights instance. That instance is an older version of the SDK that lacks traceparent implementation and will not be upgraded.

In dev tools console I can see both SDK instances properly configured.

I am struggling with several issues:

1. When deployed to TST or PROD, dependency calls do not contain traceparent header any more. I have repeatedly verified and confirmed this by looking at the requests in dev tools. I tried to use the snippet, but I could not get it to work. What do I need to do to enable the header?
2. I am using Telemetry Viewer extension for my browser and in its log I see that when deployed to TST or PROD, my SDK instance logs only “Fetch” dependencies, but does not log “Ajax” dependencies, whereas the other SDK instance logs both of those fine. The calls that are not being logged are the calls that are made to the domain listed in correlationHeaderDomains config option. All these calls are HTTP 200 by the way. What do I need to do to collect the Ajax dependency calls as well?
3. In Telemetry Viewer logs I see hundreds of “component-timing” events sent to the endpoint by my SDK instance but all of them contain measurement “elapsed: NaN”. What do I need to do to stop sending those?
4. I get bunch of exceptions logged in my Application Insights in Azure with message: "message":"Uncaught [object Object]: {\"messageId\":26,\"message\":\"AI (Internal): 26 message:\\\"Failed to send telemetry.\\\" props:\\\"{message:partial success 1 of 6}\\\"\"}","typeName":"String"} I suspect that these exceptions are logged due to “component-timing” mentioned above.

Two most important issues for me are traceparent header and logging of the dependency calls into my Azure App Insights. I would really appreciate any guidance on how to resolve them.