The Loupe Agent for Angular is a wrapper for the Loupe Agent for TypeScript, providing logging and error handling capabilities for your Angular applications.

The module automatically creates a Loupe client logger and provides a sample Angular ErrorHandler that can be enabled by configuring your application providers; this enables any uncaught errors in your Angular application to be logged to Loupe. It additionally exposes the Loupe Agent to your Angular application as an injectable service named LoupeService.

All Loupe client logging is designed to send log information to a server which handles logging to a Loupe server; please refer to the [main documentation](../../README.md) for references to the server logging portion, as installation and configuration depends upon your server. The Loupe Agent for Angular works in Angular 8 and later.

Adding the Loupe Agent to your Angular Application

The Loupe Agent for Angular is best installed via npm:

npm install @gibraltarsoftware/loupe-angular

Import the service into your main component (app.component.ts)

import { LoupeService } from '@gibraltarsoftware/loupe-angular';

Inject the service into your main component (app.component.ts)

  constructor(private readonly loupe: LoupeService) {
    ...
  }

Set the initial properties and call the Loupe methods:

  constructor(private readonly loupe: LoupeService) {
    // If you are not logging to the same web site Angular was started from, specify where to send log data
    this.loupe.setLogServer('https://mysite.com');
         
    // log a message
    this.loupe.information(this.title, 'App Started', 'The client application has started');
  }

If you don't have your own custom error handler already, configure the error handler in your application module (app.module.ts).

  providers: [
    { provide: ErrorHandler, useClass: LoupeErrorHandler }
  ]

To customize error handling, see Developer's Reference - Angular - Error Handling.

Setting Up Your ASP.NET Application to Receive Logs

The Loupe Agent for Angular is designed to forward data to a server endpoint where it will be integrated with the server's data and made available to analyze and view.  The Loupe Agent for ASP.NET publishes an endpoint to receive the data from client applications (including Angular).  For ASP.NET Core applications, some additional configuration is required to enable this endpoint, see Using Loupe with ASP.NET Core.

If your ASP.NET Core application contains your Angular code as well (which is typical), you'll want to install the Loupe Agent for Angular form NPM.  You can do this within Visual Studio by right-clicking on the ClientApp folder and selecting Open in Terminal, then from the terminal install the NPM package:

npm install @gibraltarsoftware/loupe-angular

With this package added, you can now import and use the Loupe Agent, starring in app.component.ts:

import { Component } from '@angular/core';
import { LoupeService } from '@gibraltarsoftware/loupe-angular';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  title = 'app';
  constructor(private readonly loupe: LoupeService) {
    this.loupe.information(this.title, 'App Started', 'The application has started');
  }
}

When you run your application you will now see a message logged to Loupe; if you use the browser developer tools you can see a log message being sent to the server, and you can use Loupe Desktop to view the message in more detail.