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

Question

我使用 visual studio 2015 开发了 angular2 应用程序。对于该应用程序，我需要配置应用程序洞察力。

这是我在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>

以上代码将跟踪所有事件，甚至来自 Node_Modules 个文件。但我只想在我的 angualar 2 应用程序中跟踪我的组件文件的自定义事件和异常。

在此处发布问题之前，我点击了以下链接，但这些链接与 angualrJs 相关，与 angualr2 应用程序无关。 http://www.stevenfollis.com/2015/04/01/using-application-insights-with-angularjs-applications/ https://github.com/johnhidey/angular-appinsights

你能告诉我如何使用 visual studio 2015 将应用程序洞察添加到带有打字稿的 angular2 应用程序中，并告诉我如何访问我的组件文件中的 window.appInsights。

-普拉迪普

Answer 1

//------------写一个服务

    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);
        };

//------------组件中的用法

    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);
        }
    }

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

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

typescript

azure-application-insights

angular