Azure Application Insights–Set cloud role name in Angular application

I've talked about how to setup Application Insights in an Angular application and also shared how to set the cloud role name in ASP.NET Core to improve the telemetry reporting. Let's build on top of these 2 posts and show you today how to update the cloud role name in an Angular application.

We’ll start by extending our environment.ts file with an extra configuration setting to store the application name:

	export const environment = {
	production: false,
	baseApiUrl: 'http://localhost:3000/api',
	appInsights: {
	instrumentationKey: '[Replace With Your Key]',
	applicationName: 'FrontEndApp'
	}
	};

view raw environment.ts hosted with ❤ by GitHub

Once that is done, we need to go the service (app-insights.service.ts) where we create our Application Insights instance. There we need to add a custom telemetry initializer by calling the addTelemetryInitializer method:

	import { Injectable } from '@angular/core';
	import { ApplicationInsights } from '@microsoft/applicationinsights-web';
	import { environment } from 'src/environments/environment';
	@Injectable({
	providedIn: 'root'
	})
	export class AppInsightsService {
	instance: ApplicationInsights;
	constructor() {
	this.instance = new ApplicationInsights({ config: {
	instrumentationKey: environment.appInsights.instrumentationKey,
	enableCorsCorrelation: true,
	enableAutoRouteTracking: true
	} });
	this.instance.loadAppInsights();
	this.instance.trackPageView();
	this.instance.addTelemetryInitializer((envelope) => {
	envelope.tags = envelope.tags || [];
	envelope.tags.push({ "ai.cloud.role": environment.appInsights.applicationName });
	});
	}
	//Removed the other code
	}

view raw app-insights.service.ts hosted with ❤ by GitHub

Now when we run our Angular application, the cloud role name should be reported correctly to Application Insights.