1
1
# Angular Azure Application Insights implementation
2
2
3
- ## Connect your Angular client-side to Microsofts Application Insights with this easy-to-use Module.
3
+ ## Connect your Angular client-side to Microsofts Application Insights with this easy-to-use Module
4
4
5
5
> Application Insights is an extensible Application Performance Management (APM) service for web developers on multiple platforms. Use it to monitor your live web application. It will automatically detect performance anomalies. It includes powerful analytics tools to help you diagnose issues and to understand what users actually do with your app.
6
6
7
7
[ ![ npm] ( https://img.shields.io/npm/v/@markpieszak/ng-application-insights.svg?label=npm%20version&color=5b1096&style=for-the-badge )] ( https://www.npmjs.com/@markpieszak/ng-application-insights )
8
8
[ ![ Minzipped Size] ( https://img.shields.io/bundlephobia/minzip/@markpieszak/ng-application-insights?color=e51384&style=for-the-badge )] ( https://bundlephobia.com/result?p=@markpieszak/ng-application-insights )
9
9
[ ![ NPM Downloads] ( https://img.shields.io/npm/dw/@markpieszak/ng-application-insights.svg?color=b31ae7&style=for-the-badge )] ( https://www.npmjs.com/@markpieszak/ng-application-insights )
10
- [ ![ MIT License] ( https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge&color=e51384 )] ( /LICENSE )
10
+ [ ![ MIT License] ( https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge&color=e51384 )] ( /LICENSE )
11
11
12
12
---
13
13
14
14
<p align =" center " >
15
15
<a href =" https://trilon.io " target =" _blank " >
16
- <img width="500" height="auto" src="https://trilon.io/trilon-logo-clear.png" alt="Trilon.io - Angular Universal, NestJS, JavaScript Application Consulting Development and Training">
16
+ <img width="500" height="auto" src="https://trilon.io/trilon-logo-clear.png" alt="Trilon.io - Angular Universal, NestJS, JavaScript Application Consulting Development and Training">
17
17
</a >
18
18
</p >
19
19
20
-
21
20
<h3 align =" center " > Made with :heart: by <a href =" https://trilon.io " >Trilon.io</a ></h3 >
22
21
23
22
---
@@ -28,6 +27,10 @@ Install & save the library to your package.json:
28
27
29
28
``` bash
30
29
$ npm i -S @markpieszak/ng-application-insights
30
+
31
+ # yarn
32
+
33
+ $ yarn add @markpieszak/ng-application-insights
31
34
```
32
35
33
36
---
@@ -97,7 +100,7 @@ export class ShoppingCartComponent {
97
100
98
101
## Usage with Aspnetcore-Angular2-Universal repo or JavaScriptServices ( apps w/ Server-side rendering )
99
102
100
- > ie: https://github.com/TrilonIO/aspnetcore-angular-universal
103
+ > ie: < https://github.com/TrilonIO/aspnetcore-angular-universal >
101
104
102
105
First, make sure you are only importing the library & the server within the ** browser-app.module** NgModule (do not share it within a common one, as the server isn't able to use this library during it's server-renders).
103
106
@@ -106,25 +109,25 @@ Secondly, make sure you are calling the `injector` to get AppInsightsService dur
106
109
``` typescript
107
110
export class HomeComponent implements OnInit {
108
111
109
- private AIService: AppInsightsService ;
110
- private isBrowser: boolean ;
112
+ private AIService: AppInsightsService ;
113
+ private isBrowser: boolean ;
111
114
112
- constructor (@Inject (PLATFORM_ID ) private platformId , private injector : Injector ) {
113
- this .isBrowser = isPlatformBrowser (this .platformId );
114
- }
115
+ constructor (@Inject (PLATFORM_ID ) private platformId , private injector : Injector ) {
116
+ this .isBrowser = isPlatformBrowser (this .platformId );
117
+ }
115
118
116
- ngOnInit() { // <--
117
- if (this .isBrowser ) { // <-- only run if isBrowser
118
- this .AIService = <AppInsightsService >this .injector .get (AppInsightsService ); // <-- using the Injector, get the Service
119
- this .AIService .trackEvent (' Testing' , { ' user' : ' me' });
120
- }
121
- }
119
+ ngOnInit() { // <--
120
+ if (this .isBrowser ) { // <-- only run if isBrowser
121
+ this .AIService = <AppInsightsService >this .injector .get (AppInsightsService ); // <-- using the Injector, get the Service
122
+ this .AIService .trackEvent (' Testing' , { ' user' : ' me' });
123
+ }
124
+ }
122
125
}
123
126
```
124
127
125
128
## API
126
129
127
- You can see a list of the API here: https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md#class-appinsights
130
+ You can see a list of the API here: < https://github.com/Microsoft/ApplicationInsights-JS/blob/master/API-reference.md#class-appinsights >
128
131
129
132
``` typescript
130
133
AppInsightsService .trackEvent ()
@@ -164,27 +167,26 @@ npm run lint
164
167
165
168
# License
166
169
167
- [ ![ MIT License] ( https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge&color=e51384 )] ( /LICENSE )
170
+ [ ![ MIT License] ( https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge&color=e51384 )] ( /LICENSE )
168
171
169
- Copyright (c) 2016-2020 [ Mark Pieszak] ( https://twitter.com/MarkPieszak )
172
+ Copyright (c) 2016-2021 [ Mark Pieszak] ( https://twitter.com/MarkPieszak )
170
173
171
174
[ ![ Twitter Follow] ( https://img.shields.io/twitter/follow/MarkPieszak.svg?style=social )] ( https://twitter.com/MarkPieszak )
172
175
173
176
----
174
177
175
178
# Trilon - JavaScript, ASP.NET, Node, NestJS - Consulting | Training | Development
176
179
177
- Check out ** [ Trilon.io] ( https://Trilon.io ) ** for more info!
180
+ Check out ** [ Trilon.io] ( https://Trilon.io ) ** for more info!
178
181
179
182
Contact us at
< [email protected] > , and let's talk about your projects needs.
180
183
181
184
<p align =" center " >
182
185
<a href =" https://trilon.io " target =" _blank " >
183
- <img src="https://trilon.io/trilon-logo-clear.png" alt="Trilon.io - Angular Universal, NestJS, JavaScript Application Consulting Development and Training">
186
+ <img src="https://trilon.io/trilon-logo-clear.png" alt="Trilon.io - Angular Universal, NestJS, JavaScript Application Consulting Development and Training">
184
187
</a >
185
188
</p >
186
189
187
- ## Follow Trilon online:
190
+ ## Follow Trilon online
188
191
189
192
Twitter: [ @Trilon_io] ( http://twitter.com/Trilon_io )
190
-
0 commit comments