# microsoft-applicationinsights-angular5

> This is a wrapper library for Angular 5+ modules over Microsoft Application Insights SDK.

Latest version **0.1.6** (published 2017-12-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install microsoft-applicationinsights-angular5
pnpm add microsoft-applicationinsights-angular5
yarn add microsoft-applicationinsights-angular5
bun add microsoft-applicationinsights-angular5
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.6 |
| Published | 2017-12-01 |
| First published | 2017-11-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 13 |
| Known vulnerabilities | 0 (+21 in 3 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Manish Ramchand |
| Maintainers | maniram |
| Keywords | azure, microsoft, application insights, appinsights, telemetry, microsoft appinsights, microsoft application insights |

## Links

- npm: https://www.npmjs.com/package/microsoft-applicationinsights-angular5
- Repository: https://github.com/manishrasrani/microsoft-applicationinsights-angular5
- Homepage: https://github.com/manishrasrani/microsoft-applicationinsights-angular5#readme
- Issues: https://github.com/manishrasrani/microsoft-applicationinsights-angular5/issues
- npm.io page: https://npm.io/package/microsoft-applicationinsights-angular5

## Dependencies (13)

- [rxjs](https://npm.io/package/rxjs.md) ^5.5.2
- [core-js](https://npm.io/package/core-js.md) ^2.4.1
- [zone.js](https://npm.io/package/zone.js.md) ^0.8.14
- [@angular/core](https://npm.io/package/@angular/core.md) ^5.0.0
- [@angular/http](https://npm.io/package/@angular/http.md) ^5.0.0
- [@angular/forms](https://npm.io/package/@angular/forms.md) ^5.0.0
- [@angular/common](https://npm.io/package/@angular/common.md) ^5.0.0
- [@angular/router](https://npm.io/package/@angular/router.md) ^5.0.0
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) ^5.0.0
- [@angular/animations](https://npm.io/package/@angular/animations.md) ^5.0.0
- [applicationinsights-js](https://npm.io/package/applicationinsights-js.md) ~1.0.14
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) ^5.0.0
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) ^5.0.0

## Recent versions

- 0.1.6 (latest) — 2017-12-01
- 0.1.5 — 2017-12-01
- 0.1.4 — 2017-11-30
- 0.1.3 — 2017-11-29
- 0.1.2 — 2017-11-29
- 0.1.1 — 2017-11-29
- 0.1.0 — 2017-11-29
- 0.0.9 — 2017-11-29
- 0.0.8 — 2017-11-29
- 0.0.7 — 2017-11-23
- 0.0.6 — 2017-11-23
- 0.0.5 — 2017-11-23
- 0.0.4 — 2017-11-23
- 0.0.3 — 2017-11-23
- 0.0.2 — 2017-11-23
- … 2 more at https://npm.io/package/microsoft-applicationinsights-angular5/versions

## README

# microsoft-applicationinsights-angular5

This is a wrapper library for Angular 5+ modules over Microsoft Application Insights SDK.

Working example at [https://github.com/manishrasrani/microsoft-applicationinsights-angular5-example](https://github.com/manishrasrani/microsoft-applicationinsights-angular5-example)

___
Application Insights is an Azure service for monitoring web applications. It includes analytics tools to help you understand application usage and to diagnose issues with the goal of continuously improving performance and usability. To read more on ApplicationInsights, refer [here](https://docs.microsoft.com/en-us/azure/application-insights/app-insights-overview).
___

 <h2>Consumption of the library</h2>

 **Step 1: Install the package**
 ```bash
npm i microsoft-applicationinsights-angular5
```
Also add it to your dependencies section in package.json so that it is restored when you do an npm install.

**Step 2: Import the AppInsights module**

In the root mosule of your application, do import the AppInsights module.

```bash
import { AppInsightsModule } from 'microsoft-applicationinsights-angular5';
```

Add it to the imports array in your root module by providing the Instrumentation Key of the AppInsights resource where you want to log the insights.

```bash
@NgModule({
  declarations: [
    AppComponent,
    ---
  ],
  imports: [
    BrowserModule, 
    AppInsightsModule.forRoot('<YOUR INSTRUMENTATION KEY>'), <------------ ADD
    ---
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

**Step 3: Consuming the library in your application**

Wherever you do want to consume the library, just import the AppInsightsService and inject it in your constructor.

```bash
import { AppInsightsService } from 'microsoft-applicationinsights-angular5';
---

constructor(private logger: AppInsightsService) { }
---
```

Send telemetry data to AppInsights as shown below - 

```bash
this.logger.logTrace("This is a trace");
this.logger.logEvent("This is an event");
this.logger.logPageView("Page", "http://localhost:4200");
this.logger.logException(new Error("This is an exception"));
```

Additional properties to the above methods can also be set if required. Example - 
```bash
this.logger.logEvent({name: "My custom event", properties: {customProperty: "custom property value"}});
```

With these steps your application should be up and running with Application Insights.

---
_Source: https://npm.io/package/microsoft-applicationinsights-angular5 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._