Elastic APM RUM not working with Angular 8

Elastic Observability APM
1

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 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
apm-angular-error1524Ă—160 10.6 KB

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

2

Hi Chandra,

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

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

Thanks,
Vignesh

3

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. 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

4

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. 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

5

Hi Vignesh,

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

image

Can you please advise.

Thanks,
Chandra

6

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.

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

Thanks,
Vignesh

7

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 documentation changes when we upgraded the Angular and rum versions.

image

Thanks again.

Regards,
Chandra

8

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

Thanks,
Vignesh

1 Like
9

Nice! This is exactly what we are looking for.

You guys are awesome.

Thanks,
Chandra

1 Like
10

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