Angular SPA 和 .Net 6 API 之间未连接 Application Insights Map

我有一个叫我的.Net 6 API，然后调用数据库.

我将ApplicationInsights JS SDK和Angular插件添加到我的SPA中，并对它们进行了初始化

package.json

"@microsoft/applicationinsights-web": "2.7.4",
"@microsoft/applicationinsights-angularplugin-js": "2.8.0",

app.component.ts

export class AppComponent {
  title = 'app';
  constructor(
    private router: Router,
    private settings: SettingsService,
  ) {
    const aiInstrumentationKey = 'ApplicationInsights_InstrumentationKey';
    var angularPlugin = new AngularPlugin();
    const appInsights = new ApplicationInsights({
      config: {
        instrumentationKey: settings.settings.extensions[aiInstrumentationKey],
        distributedTracingMode: DistributedTracingModes.W3C,
        disableFetchTracking: false,
        enableCorsCorrelation: true,
        enableDebug: true,
        enableDebugExceptions: true,
        enableRequestHeaderTracking: true,
        enableResponseHeaderTracking: true,
        extensions: [angularPlugin],
        extensionConfig: {
          [angularPlugin.identifier]: { router: this.router }
        }
      }
    });
    appInsights.loadAppInsights();
  }
}

在我的API中，我添加了NuGet包，并在我的Startup类中对其进行了初始化.

.csproj

<PackageReference Include="Microsoft.ApplicationInsights.AspNetCore" Version="2.20.0" />

Startup.cs

services.AddApplicationInsightsTelemetry();

I can see the end-to-end transaction details just fine and they seem to carry the Operation ID (fb0903820fa64ef092fbcd432336e949 in my example) just fine through the whole dependency chain

However the Application Map does not line up with this. I would expect the red arrow, but instead I'm getting two disconnected graphs.

当我点击绿色圆圈的 node 并深入到示例中时，我会进入相同的端到端事务，就像我点击SPA的左下角 node 一样.

我该怎么做才能正确连接图形？