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

**URL:** <https://discuss.elastic.co/t/has-anyone-been-able-to-use-elastic-apm-rum-angular-with-aot/198456>\
**Category:** APM\
**Tags:** rum\
**Created:** [September 6, 2019, 5:30pm UTC](https://discuss.elastic.co/t/has-anyone-been-able-to-use-elastic-apm-rum-angular-with-aot/198456 "2019-09-06T17:30:45Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Azuka](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/azuka/32/38568_2.png) [@Azuka](https://discuss.elastic.co/u/Azuka)\
**Post date:** [September 6, 2019, 5:30pm UTC](https://discuss.elastic.co/t/has-anyone-been-able-to-use-elastic-apm-rum-angular-with-aot/198456/1 "2019-09-06T17:30:45Z")

</div>

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](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)**:

```auto
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:

```auto
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](https://github.com/elastic/apm-agent-rum-js/blob/master/packages/rum-angular/src/apm-service.ts#L85).

---

<div class="post-metadata">

**Author:** ![vigneshshanmugam](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/vigneshshanmugam/32/40324_2.png) [@vigneshshanmugam](https://discuss.elastic.co/u/vigneshshanmugam)\
**Post date:** [September 9, 2019, 8:42am UTC](https://discuss.elastic.co/t/has-anyone-been-able-to-use-elastic-apm-rum-angular-with-aot/198456/2 "2019-09-09T08:42:25Z")

</div>

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](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](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

---

<div class="post-metadata">

**Author:** ![vigneshshanmugam](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/vigneshshanmugam/32/40324_2.png) [@vigneshshanmugam](https://discuss.elastic.co/u/vigneshshanmugam)\
**Post date:** [September 10, 2019, 1:03pm UTC](https://discuss.elastic.co/t/has-anyone-been-able-to-use-elastic-apm-rum-angular-with-aot/198456/3 "2019-09-10T13:03:25Z")

</div>

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](https://github.com/elastic/apm-agent-rum-js/pull/414).

Thanks,  
Vignesh

---

<div class="post-metadata">

**Author:** ![Azuka](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/azuka/32/38568_2.png) [@Azuka](https://discuss.elastic.co/u/Azuka)\
**Post date:** [September 10, 2019, 4:59pm UTC](https://discuss.elastic.co/t/has-anyone-been-able-to-use-elastic-apm-rum-angular-with-aot/198456/4 "2019-09-10T16:59:43Z")

</div>

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

Thanks so much!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [October 1, 2019, 12:59pm UTC](https://discuss.elastic.co/t/has-anyone-been-able-to-use-elastic-apm-rum-angular-with-aot/198456/5 "2019-10-01T12:59:46Z")

</div>

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.