# Elastic APM RUM not working with Angular 8

**URL:** <https://discuss.elastic.co/t/elastic-apm-rum-not-working-with-angular-8/214274>\
**Category:** APM\
**Tags:** rum\
**Created:** [January 8, 2020, 4:12pm UTC](https://discuss.elastic.co/t/elastic-apm-rum-not-working-with-angular-8/214274 "2020-01-08T16:12:05Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![chandra2037](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/chandra2037/32/72142_2.png) [@chandra2037](https://discuss.elastic.co/u/chandra2037)\
**Post date:** [January 8, 2020, 4:12pm UTC](https://discuss.elastic.co/t/elastic-apm-rum-not-working-with-angular-8/214274/1 "2020-01-08T16:12:05Z")

</div>

**Kibana version** : 7.4.0

**Elasticsearch version** : 7.4.0

**APM Server version** : 7.4.0

**APM Agent language and version** : `@elastic/apm-rum-angular` 0.3.0. Angular 8.2.14.

**Fresh install or upgraded from other version?** Fresh

**Is there anything special in your setup?** Followed the [Angular Integration](https://www.elastic.co/guide/en/apm/agent/rum-js/master/angular-integration.html) instructions

**Description of the problem including expected versus actual behavior. Please include screenshots (if relevant)**:

It was working fine with the Angular 7.2, but after upgrading Angular to 8.2.14, getting the following error

> Uncaught Error: Can't resolve all parameters for AppComponent: ([object Object], [object Object], [object Object], ?).

 ![apm-angular-error](https://us1.discourse-cdn.com/elastic/original/3X/5/d/5d5a1101cce2fdca4b98592ca314a9e4194e4ca4.png)

Not unable import the “ApmService” into the app component.

Some of the relevant dependencies

> "dependencies": {  
> "@angular/common": "~8.2.14",  
> "@angular/compiler": "~8.2.14",  
> "@angular/core": "~8.2.14",  
> "@angular/forms": "~8.2.14",  
> "@angular/material": "^7.3.7",  
> "@angular/router": "~8.2.14",  
> "@elastic/apm-rum-angular": "^0.3.0"  
> },  
> "devDependencies": {  
> "@angular-devkit/build-angular": "~0.803.21",  
> "@angular/cli": "~8.3.21",  
> "@angular/compiler-cli": "~8.2.14",  
> "typescript": "~3.5.3"  
> }

Any help would be appreciated

---

<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:** [January 8, 2020, 4:34pm UTC](https://discuss.elastic.co/t/elastic-apm-rum-not-working-with-angular-8/214274/2 "2020-01-08T16:34:24Z")

</div>

Hi Chandra,

Thanks for trying out the Angular Integration. It feels similar to the issue already mentioned here

> [@Has anyone been able to use @elastic/apm-rum-angular with aot?](https://discuss.elastic.co/t/has-anyone-been-able-to-use-elastic-apm-rum-angular-with-aot/198456):
>
> 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? Fr…

Could you please import the necessary polyfills, especially the `Reflect.metadata` and let us know if the issue disappear.

Thanks,  
Vignesh

---

<div class="post-metadata">

**Author:** ![chandra2037](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/chandra2037/32/72142_2.png) [@chandra2037](https://discuss.elastic.co/u/chandra2037)\
**Post date:** [January 8, 2020, 7:04pm UTC](https://discuss.elastic.co/t/elastic-apm-rum-not-working-with-angular-8/214274/3 "2020-01-08T19:04:19Z")

</div>

Hi Vignesh,

Thank you for your quick response.

Including the polyfills matching with the [https://stackblitz.com/edit/angular-router-basic-example-grz785?file=polyfills.ts](https://stackblitz.com/edit/angular-router-basic-example-grz785?file=polyfills.ts). but no luck.

But I noticed that example is with Angular 7, can you please confirm if the APM RUM working okay with Angular 8?

Thanks,  
Chandra

---

<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:** [January 10, 2020, 1:02pm UTC](https://discuss.elastic.co/t/elastic-apm-rum-not-working-with-angular-8/214274/4 "2020-01-10T13:02:10Z")

</div>

Hi Chandra,

I have upgraded all the dependencies to the latest and created a new fork [https://stackblitz.com/edit/angular-router-basic-example-pc8stk](https://stackblitz.com/edit/angular-router-basic-example-pc8stk). It works without any issues and also our tests in the package are also run with Angular 8 so I am not sure what is missing from your set up.

Could you please share your code so that its easier for us to debug?

Thanks,  
Vignesh

---

<div class="post-metadata">

**Author:** ![chandra2037](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/chandra2037/32/72142_2.png) [@chandra2037](https://discuss.elastic.co/u/chandra2037)\
**Post date:** [January 10, 2020, 3:03pm UTC](https://discuss.elastic.co/t/elastic-apm-rum-not-working-with-angular-8/214274/5 "2020-01-10T15:03:24Z")

</div>

Hi Vignesh,

When I looked at the new example you provided I am getting missing packages error

![image](https://us1.discourse-cdn.com/elastic/original/3X/e/b/ebec204290edf132545011acee45eac717d75827.png)

Can you please advise.

Thanks,  
Chandra

---

<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:** [January 14, 2020, 9:42am UTC](https://discuss.elastic.co/t/elastic-apm-rum-not-working-with-angular-8/214274/6 "2020-01-14T09:42:56Z")

</div>

Hi Chandra,

It seems like stackblitz has some issues installing dependencies. I have ported over the same demo over to CodeSandbox and it works the same.

> **[elastic-apm-rum-angular8 - CodeSandbox](https://codesandbox.io/s/elastic-apm-rum-angular8-3jbss)**
>
> elastic-apm-rum-angular8 by vigneshshanmugam using @angular/animations, @angular/common, @angular/compiler, @angular/core, @angular/forms, @angular/http, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/router

Nothing has changed except the components are passed in to the declarations of AppModule instead of the Routing mode declaration.

Thanks,  
Vignesh

---

<div class="post-metadata">

**Author:** ![chandra2037](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/chandra2037/32/72142_2.png) [@chandra2037](https://discuss.elastic.co/u/chandra2037)\
**Post date:** [January 15, 2020, 8:23pm UTC](https://discuss.elastic.co/t/elastic-apm-rum-not-working-with-angular-8/214274/7 "2020-01-15T20:23:49Z")

</div>

Hi Vignesh,

Thank you for your input and time. We are able to make it work on Angular 8 with a small change to the configuration.

Earlier we were not using `@Inject()` with `@elastic/apm-rum-angular 0.2.0. Angular 7.2.4`. Didn't notice the [Angular Integration](https://www.elastic.co/guide/en/apm/agent/rum-js/current/angular-integration.html) documentation changes when we upgraded the Angular and rum versions.

![image](https://us1.discourse-cdn.com/elastic/original/3X/a/e/aed76775867c0567e098cd3b023caf52e1e9ac3f.png)

Thanks again.

Regards,  
Chandra

---

<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:** [January 16, 2020, 10:36am UTC](https://discuss.elastic.co/t/elastic-apm-rum-not-working-with-angular-8/214274/8 "2020-01-16T10:36:57Z")

</div>

Hi Chandra,

Ahh yeah, Glad you figured out. We also released the automatic Error handler integration for Angular which would be helpful in reporting errors [https://www.elastic.co/guide/en/apm/agent/rum-js/current/angular-integration.html#\_capturing\_errors\_in\_angular\_applications](https://www.elastic.co/guide/en/apm/agent/rum-js/current/angular-integration.html#_capturing_errors_in_angular_applications)

Thanks,  
Vignesh

---

<div class="post-metadata">

**Author:** ![chandra2037](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/chandra2037/32/72142_2.png) [@chandra2037](https://discuss.elastic.co/u/chandra2037)\
**Post date:** [January 16, 2020, 1:41pm UTC](https://discuss.elastic.co/t/elastic-apm-rum-not-working-with-angular-8/214274/9 "2020-01-16T13:41:53Z")

</div>

Nice! This is exactly what we are looking for.

You guys are awesome.

Thanks,  
Chandra

---

<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:** [February 6, 2020, 9:42am UTC](https://discuss.elastic.co/t/elastic-apm-rum-not-working-with-angular-8/214274/10 "2020-02-06T09:42:07Z")

</div>

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