search

MicrosoftDocs / azure-docs

Open source documentation of Microsoft Azure
https://docs.microsoft.com/azure
Creative Commons Attribution 4.0 International
10.26k stars 21.43k forks source link

applicaiton insights sample code has errors for Ng14.1.3 project #109392

Closed OzBob closed 1 year ago

OzBob commented 1 year ago

The sample TS code for the Angular app here https://learn.microsoft.com/en-us/azure/azure-monitor/app/javascript-framework-extensions?tabs=angular#basic-usage-1

when pasted into an Angular 14.1.3 project produces the following 2 errors:

1 "app.component.ts",

        "app.component.ts",
    "owner": "typescript",
    "code": "2322",
    "severity": 8,
    "message": "Type 'AngularPlugin' is not assignable to type 'ITelemetryPlugin'.
  Types of property 'setNextPlugin' are incompatible.
    Type '(next: import(\"d:/dev/s/insol6/i6sass/node_modules/@microsoft/applicationinsights-core-js/types/JavaScriptSDK.Interfaces/ITelemetryPlugin\").ITelemetryPlugin | import(\"d:/dev/s/insol6/i6sass/node_modules/@microsoft/applicationinsights-core-js/types/JavaScriptSDK.Interfaces/ITelemetryPluginChain\").ITelemetryPluginChai...' 
is not assignable to type 
'(next: import(\"d:/dev/s/insol6/i6sass/node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/applicationinsights-core-js/types/applicationinsights-core-js\").ITelemetryPlugin | import(\"d:/dev/s/insol6/i6sass/node_modules/@microsoft/applicationinsights-analytics-js/node_modules/@microsoft/app...'.
      Types of parameters 'next' and 'next' are incompatible.
    "source": "ts",

2 app.module.ts ""Cannot find name 'ErrorHandler'.""

Document Details

⚠ Do not edit this section. It is required for learn.microsoft.com ➟ GitHub issue linking.

SaibabaBalapur-MSFT commented 1 year ago

@OzBob Thanks for your feedback! We will investigate and update as appropriate.

OzBob commented 1 year ago

could be related to this issue https://github.com/microsoft/applicationinsights-angularplugin-js/issues/76

AaronMaxwell commented 1 year ago

The latest code sample is available on GitHub.

https://github.com/microsoft/applicationinsights-angularplugin-js

OzBob commented 1 year ago

@AaronMaxwell points out that the latest App Insights Ng plugin: https://github.com/microsoft/applicationinsights-angularplugin-js/blob/main/sample/applicationinsights-angularplugin-sample/package.json#LL27C5-L35C53 recommends:

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

So, I would recommend the docs 'Getting Started' section be updated from:

npm install @microsoft/applicationinsights-angularplugin-js@3.0.2 @microsoft/applicationinsights-web@2.8.13 --save

to

npm install @microsoft/applicationinsights-angularplugin-js @microsoft/applicationinsights-web --save

2.8.13 as it is the highest pre-V3 version on npmjs

MonikaReddy-MSFT commented 1 year ago

@OzBob - Thanks again for bringing this to our attention. We have updated the Doc and it will be live once its merged. We will now proceed to close this thread. If there are further questions regarding this matter, please tag me in your reply. We will gladly continue the discussion and we will reopen the issue.