First, thanks for the initial Angular integration. This might be premature, given it's not full ready and was just released 3 days ago, but I had some issues integrating it.
Kibana version:
7.3.1
Elasticsearch version:
7.3.1
APM Server version:
7.3.1
APM Agent language and version:
@elastic/apm-rum-angular 0.1.0. Angular 8.2.5.
Browser version:
Original install method (e.g. download page, yum, deb, from source, etc.) and version:
yarn
Fresh install or upgraded from other version?
Fresh
Is there anything special in your setup? For example, are you using the Logstash or Kafka outputs? Are you using a load balancer in front of the APM Servers? Have you changed index pattern, generated custom templates, changed agent configuration etc.
N/A. This worked with just the old RUM version.
Description of the problem including expected versus actual behavior. Please include screenshots (if relevant):
I followed the instructions on https://www.elastic.co/guide/en/apm/agent/rum-js/master/angular-integration.html to try to get working with a multi-project Angular app.
Steps to reproduce:
- As above
- ApmService could not be resolved because the types weren't exported. I had to create my own typings.d.ts file (which worked locally via ng serve) but failed live when compiled with aot.
- Everything failed when using aot compilation for prod.
Errors in browser console (if relevant):
Uncaught TypeError: Reflect.metadata is not a function
at Module.zUnb (main.6b6e25786da4a1cc956c.js:1)
at c (runtime.245676fb67a1d3031d5d.js:1)
at Object.0 (main.6b6e25786da4a1cc956c.js:1)
at c (runtime.245676fb67a1d3031d5d.js:1)
at t (runtime.245676fb67a1d3031d5d.js:1)
at Array.r [as push] (runtime.245676fb67a1d3031d5d.js:1)
at main.6b6e25786da4a1cc956c.js:1
Typings:
declare module '@elastic/apm-rum-angular' {
import { Router } from '@angular/router';
import { Injectable } from '@angular/core';
export interface ApmUserContext {
id?: string | number;
username?: string;
email?: string;
}
export interface Apm {
setUserContext(userContext: ApmUserContext);
}
export interface ApmConfig {
serviceName?: string;
serverUrl?: string;
serviceVersion?: string;
distributedTracingOrigins?: string[];
environment?: string;
enabled?: boolean;
}
@Injectable({
providedIn: 'root'
})
export class ApmService {
static apm: Apm;
constructor(router: Router);
init(config: ApmConfig): Apm;
}
}
Provide logs and/or server output (if relevant):
Minor issue: The integration with the angular router doesn't provide the full route path. ie lazy loaded child routes still get reported under the main route. I suspect this is because the service's subscription only reports the route first child: https://github.com/elastic/apm-agent-rum-js/blob/master/packages/rum-angular/src/apm-service.ts#L85.