Adding script to Angular2

[kkocabiyik]

I'm trying to use applicationinsight-js in an angular with webpack. However import statement is not able to find applicationinsight-js folder. I've done all the things as it is said in the installation but couldn't able to load in an angular2 app.. By the way I have already added "applicationinsights-ts" : "1.0.5" into my devDependencies and dependencies section in package.json

[kkocabiyik]

I made it work. But I guess it is a cheesy way. What I have done was : I added the javascript into index.html to get the script. <script type="text/javascript"> var appInsights = window.appInsights || function (config) { function i(config) { t[config] = function () { var i = arguments; t.queue.push(function () { t[config].apply(t, i) }) } } var t = { config: config }, u = document, e = window, o = "script", s = "AuthenticatedUserContext", h = "start", c = "stop", l = "Track", a = l + "Event", v = l + "Page", y = u.createElement(o), r, f; y.src = config.url || "https://az416426.vo.msecnd.net/scripts/a/ai.0.js"; u.getElementsByTagName(o)[0].parentNode.appendChild(y); try { t.cookie = u.cookie } catch (p) {} for (t.queue = [], t.version = "1.0", r = ["Event", "Exception", "Metric", "PageView", "Trace", "Dependency"]; r .length;) i("track" + r.pop()); return i("set" + s), i("clear" + s), i(h + a), i(c + a), i(h + v), i(c + v), i("flush"), config.disableExceptionTracking || (r = "onerror", i("_" + r), f = e[r], e[r] = function (config, i, u, e, o) { var s = f && f(config, i, u, e, o); return s !== !0 && t["_" + r](config, i, u, e, o), s }), t }({ instrumentationKey: "xxxxxxxx" }); window.appInsights = appInsights; </script>

Then opened up a component.ts file and added declare var appInsights: any;

After that I was able to call the track method in ngAfterViewInit method with appInsights.trackPageView("campaigns");

Since this is global javascript file I could able to track. Is there a better way to implement this or is this a common way of usage?

[SergeyKanzhelev]

It seems like people doing it this way: here and here. I'll let @AlexBulankou and @kamilszostak comment on whether we can provide a better way.

[kkocabiyik]

Thanks for your feedback. Examples you provided are actually for angularjs. However, that gives us an idea how to import this into angular2. As far as I understand, I need to create a global service in order to make the tracking global over application insights.

[AlexBulankou]

@kkocabiyik, why doesn't this way work: https://github.com/Microsoft/ApplicationInsights-JS#import-as-a-module-and-initialize-dynamically-download-full-application-insights-script-from-cdn ?

/* import AppInsights */
import {AppInsights} from "applicationinsights-js"

/* Call downloadAndSetup to download full ApplicationInsights script from CDN and initialize it with instrumentation key */
AppInsights.downloadAndSetup({ instrumentationKey: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx" });

AppInsights.trackPageView("campaigns");

[kkocabiyik]

It is not able to find the module directly i guess. When you import 'applicationinsights-js', angular2 compiler actually looks a file for applicationinsights-js however there is no AppInsights in that folder. I guess that's why.

[ghost]

@kkocabiyik It's not required to have a file called AppInsights in that folder.

In the package.json there is one line, that defines the entry point:

"main": "JavaScript/JavaScriptSDK.Module/AppInsightsModule.js",

If you check that file, in the end it exports AppInsights:

exports.AppInsights = AppInsightsModule.appInsightsInstance;

You can fix this by adding the typescript definitions:

npm install --save @types/applicationinsights-js

Make sure that typeRoots in tsconfig.json is set to:

 "typeRoots": [
      "../node_modules/@types"
    ],

[AlexBulankou]

Thanks @rolandoldengarm . @kkocabiyik let us know if this addresses your issue.

[wardjc]

I get the following from WebPack:

Exception: Call to Node module failed with error: Prerendering failed because of error: ReferenceError: define is not defined

Assumin this is due to the module being compiled to JS.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.