Elastic APM RUM not working with Angular 8

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], ?).

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

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

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

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

Hi Vignesh,

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

image

Can you please advise.

Thanks,
Chandra

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

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

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

Nice! This is exactly what we are looking for.

You guys are awesome.

Thanks,
Chandra

1 Like