How to configure the application insights to angular 2 application with typescript using visual studio 2015

Question

I had developed angular2 application using visual studio 2015. for that application I need to configure the application insights.

This is code I wrote in index.html

   <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: "XXXXXXXXXXXXXXXXXXXXXXXXXXx" }); window.appInsights = appInsights; appInsights.trackPageView();
      window.appInsights = appInsights;      
   </script>     

The above code will track all events even from Node_Modules of files. but I want to track the custom events and exceptions of only my components file in my angualar 2 application.

Before posting question here I followed the below links but those are angualrJs related not an angualr2 application. http://www.stevenfollis.com/2015/04/01/using-application-insights-with-angularjs-applications/ https://github.com/johnhidey/angular-appinsights

Can you please tell me how to add the application insights to angular2 application with typescript using visual studio 2015 and also tell me how to access the window.appInsights in my Component files.

-Pradeep

Answer 1

//-----------Write a Service

    import {Injectable} from '@angular/core';

    @Injectable()
    export class LoggingService {

        logCustomEvent(fileName: string, methodName: string, eventName: string, msg: string, customData: {}, numericParams: {}): void {
            (<any>window).appInsights.trackEvent(eventName,customData, numericParams);
        };

//-----------Usage in components

    import { LoggingService } from './logging.service';

    @Component({
        selector: 'component1',
        template: require('./component1.html'),
    })

    export class Component1 {
        constructor(private loggingService: LoggingService) {
        }

        this.loggingService.logCustomEvent('Component1', 'test', 'Testing Angular2 - CustomEvent', 'Test Message', customData, numParams);
        }
    }