Compatibility with Angular 7

[jonathanblancor]

Hi,

I have an app in Angular v7.2.16. I am using

"@microsoft/applicationinsights-angularplugin-js": "^2.7.0", 
"@microsoft/applicationinsights-web": "^2.7.2",

I am getting this warning when building

And this error when accessing the app

I see the compatibility-matrix starts at Angular v11. I am wondering if these are compatibility issues. If so, what versions of AI and the angular plugin should I use for Angular 7?

This is package.json. Please let me know if you need more information. Thank you.

"dependencies": {
    "@angular-devkit/build-angular": "^0.13.0",
    "@angular/animations": "^7.2.16",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "^7.2.16",
    "@angular/compiler": "^7.2.16",
    "@angular/core": "^7.2.16",
    "@angular/forms": "^7.2.16",
    "@angular/material": "^7.3.7",
    "@angular/platform-browser": "^7.2.16",
    "@angular/platform-browser-dynamic": "^7.2.16",
    "@angular/router": "^7.2.16",
    "@microsoft/applicationinsights-angularplugin-js": "^2.7.0",
    "@microsoft/applicationinsights-web": "^2.7.2",
    "angular-gtag": "^1.0.4",
    "animate.css": "^3.7.2",
    "bootstrap": "^4.5.2",
    "core-js": "^2.6.11",
    "hammerjs": "^2.0.8",
    "jquery": "^3.5.1",
    "malihu-custom-scrollbar-plugin": "^3.1.5",
    "ngx-cookie-service": "^2.4.0",
    "ngx-scrollbar": "^4.2.0",
    "popper.js": "^1.16.1",
    "rxjs": "~6.3.3",
    "sweetalert2": "^8.19.0",
    "tableau-api": "^2.2.3",
    "tslib": "^1.13.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "^7.3.10",
    "@angular/compiler-cli": "^7.2.16",
    "@angular/language-service": "^7.2.16",
    "@types/jasmine": "^2.8.17",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.1.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^5.4.4",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  }

[MSNev]

Yes, this is a compatibility issue with Angular 7.

I am wondering if these are compatibility issues. If so, what versions of AI and the angular plugin should I use for Angular 7?

For Applicaiton Insights you can (should) be able to use any version, however, for the @microsoft/applicationinsights-angularplugin-js this is built using specific version of Angular and is where the issue is coming from.

What you can do for your Angular 7 app is to create your own Angular extension using the code in this repo as a guide, as all of the necessary components to create you own extensions are exported from the main Application Insights code.

[jonathanblancor]

@MSNev Thank you for that solution.

So far there is not a lot we need to track.
1- So if I don't use this angular plugin (or my own extension), what functionality would I be missing if just using the AI library on its own instead?
2- I read that setting enableAutoRouteTracking: true would do the route tracking, eliminating some of the need for the angular plugin?

[MSNev]

This plugin is really just providing the necessary "Hooks" for

• Route tracking via the Angular router
• Catching the Angular error handling to call trackException (via the ErrorService)
• And handling unloading / unregistering from the events when the SDK is "unloaded"

Simplistically, if your app does change the browser URL (using # of otherwise) so that the locating history API provides the necessary "Page view(s)" for you then the only issue would be the Error Service.
Additional Note: enableAutoRouteTracking WILL cause a new "PageView" for EVERY URL (history) change, so (if) you change the URL (even just to save user input or display a dialog), this will cause multiple Page view events.

[jonathanblancor]

Thank you for your help! Closing the ticket.