Has anyone been able to use @elastic/apm-rum-angular with aot?

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:

  1. As above
  2. 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.
  3. 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.

Hi Azuka,

Thanks for trying out @elastic/apm-rum-angular and providing the feedback. As you have mentioned we just released the package and its not really super stable and we would appreciate the feedback from the community.

  1. Regarding the Error, I am not sure if the polyfills.ts when you set up a project via Angular CLI is set correctly. I just tested out the rum-angular package along with angular router and it works without any issues https://stackblitz.com/edit/angular-router-basic-example-grz785. I guess it might be due to the missing corejs/es7/reflect polyfill, if you can provide us with a test repo, It would be really great.

  2. We have not published the typings for our packages since we have not prioritised it at the moment, You can track the issue here https://github.com/elastic/apm-agent-rum-js/issues/70.

  3. Minor Error: Could be a bug as you have mentioned, I will test it out and post here with more details.

Thanks,
Vignesh

Hi Azuha,

As you have mentioned, There was a bug with transaction name for lazy loader child routes. We have a pull request that would fix this issue - https://github.com/elastic/apm-agent-rum-js/pull/414.

Thanks,
Vignesh

Thanks @vigneshshanmugam. The core-js/reflect imports in polyfills fixed the problem.

Thanks so much!