v3.0.2 (next: ITelemetryPluginChain | ITelemetryPlugin) => void' is not assignable to type '(next: ITelemetryPlugin | ITelemetryPluginChain) => void'.

[OzBob]

similar to #51 , but attempting to use AI 2.8.x, in an Angular 16 project.

When using:

    "@microsoft/applicationinsights-angularplugin-js": "^3.0.2",
    "@microsoft/applicationinsights-web": "^2.8.13",

The errorr is:

Error: src/app/core/services/telemetry.service.ts:37:22 - error TS2322: Type 'AngularPlugin' is not assignable to type 'ITelemetryPlugin'.
  Types of property 'setNextPlugin' are incompatible.
    Type '(next: ITelemetryPluginChain | ITelemetryPlugin) => void' is not assignable to type '(next: ITelemetryPlugin | ITelemetryPluginChain) => void'.
      Types of parameters 'next' and 'next' are incompatible.
        Type 'ITelemetryPlugin | ITelemetryPluginChain' is not assignable to type 'ITelemetryPluginChain | ITelemetryPlugin'.
          Type 'ITelemetryPlugin' is not assignable to type 'ITelemetryPluginChain | ITelemetryPlugin'.
            Type 'import("{projectpath}/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryPlugin' is not assignable to type 'import("{projectpath}/node_modules/@microsoft/applicationinsights-angularplugin-js/node_modules/@microsoft/applicationinsights-core-js/types/JavaScriptSDK.Interfaces/ITelemetryPlugin").ITelemetryPlugin'.
              Types of property 'setNextPlugin' are incompatible.
                Type '(next: ITelemetryPlugin | ITelemetryPluginChain) => void' is not assignable to type '(next: ITelemetryPluginChain | ITelemetryPlugin) => void'.
                  Types of parameters 'next' and 'next' are incompatible.
                    Type 'ITelemetryPluginChain | ITelemetryPlugin' is not assignable to type 'ITelemetryPlugin | ITelemetryPluginChain'.
                      Type 'ITelemetryPluginChain' is not assignable to type 'ITelemetryPlugin | ITelemetryPluginChain'.
                        Type 'import("{projectpath}/node_modules/@microsoft/applicationinsights-angularplugin-js/node_modules/@microsoft/applicationinsights-core-js/types/JavaScriptSDK.Interfaces/ITelemetryPluginChain").ITelemetryPluginChain' is not assignable to type 'import("{projectpath}/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryPluginChain'.
                          The types of 'getPlugin().processTelemetry' are incompatible between these types.
                            Type '(env: import("{projectpath}/node_modules/@microsoft/applicationinsights-angularplugin-js/node_modules/@microsoft/applicationinsights-core-js/types/JavaScriptSDK.Interfaces/ITelemetryItem").ITelemetryItem, itemCtx?: import("{projectpath}/node_modules/@microsoft/applicationinsights-angularplugin-js/n...' is not assignable to type '(env: import("{projectpath}/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").ITelemetryItem, itemCtx?: import("{projectpath}/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").IProcessTelemetryContext) => void'.
                              Types of parameters 'itemCtx' and 'itemCtx' are incompatible.
                                Type 'import("{projectpath}/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js").IProcessTelemetryContext' is not assignable to type 'import("{projectpath}/node_modules/@microsoft/applicationinsights-angularplugin-js/node_modules/@microsoft/applicationinsights-core-js/types/JavaScriptSDK.Interfaces/IProcessTelemetryContext").IProcessTelemetryContext'.
                                  Types of property 'createNew' are incompatible.
                                    Type '(plugins?: IPlugin[] | ITelemetryPluginChain, startAt?: IPlugin) => IProcessTelemetryContext' is not assignable to type '(plugins?: ITelemetryPluginChain | IPlugin[], startAt?: IPlugin) => IProcessTelemetryContext'.
                                      Types of parameters 'plugins' and 'plugins' are incompatible.
                                        Type 'ITelemetryPluginChain | IPlugin[]' is not assignable to type 'IPlugin[] | ITelemetryPluginChain'.
                                          Type 'ITelemetryPluginChain' is not assignable to type 'IPlugin[] | ITelemetryPluginChain'.

37         extensions: [angularPlugin],
                        ~~~~~~~~~~~~~

where the TelemtryService I am trying to build (and which worked on Angular v14 project): is:

...
    const angularPlugin = new AngularPlugin();
    this.appInsights = new ApplicationInsights({
      config: {
        connectionString: environment.aiConnStr,
        extensions: [angularPlugin],
        extensionConfig: {
          [angularPlugin.identifier]: {router: this.router },
        },
      },
    });
    this.appInsights.loadAppInsights();
...

[OzBob]

rolling back and removing changes to packages-lock.json, ng build works:

    "@microsoft/applicationinsights-angularplugin-js": "^3.0.2",
    "@microsoft/applicationinsights-web": "^2.8.13",

[MSNev]

https://github.com/microsoft/applicationinsights-angularplugin-js#compatibility-matrix

[OzBob]

@MSNev I've found a new row for the compatibility matrix:

Version	Application Insights	Angular	Branch
3.0.2	^2.8.14	peer: ^16.2.2	main

Note: has a dependency on "@microsoft/applicationinsights-web": "^2.8.13"

[MSNev]

Yeah, the matrix is based on the values in the package.json and this issue that you are reporting is one of the reasons we released v3.0.3 to match ^2.8.14

[MSNev]

I would suggest to just update to v3.0.3 https://github.com/microsoft/applicationinsights-angularplugin-js/releases/tag/3.0.3