Elastic APM - Angular-1.3.17 integration

Elastic Observability
1

hi Team,

Am working on to integrate RUM service to angular-1.3.17, please can you help me with the steps.

Facing issues with integration and other artifacts regarding calling the libraries/modules used.

Getting error that modules like NgModule, BrowserModule, Routes, RouterModule, ApmModule, ApmService.

Modules not loaded.

How do I install these modules to make Elastic APM work.

2

hi @carly.richmond & @vigneshshanmugam ,

Please can you help

3

Hi @Dixit,

To confirm, are you trying to get the RUM agent working with AngularJS 1.3.17? That is a very old version of Angular that is past EOL.

Can you share which version of the RUM agent you have installed, along with which RUM dependencies you are installing (e.g. @elastic/apm-rum versus @elastic/apm-rum-angular)?

4

hi @carly.richmond ,

Please do suggest me steps, what I have to go through as I have tried(may be I might have missed few things) which was mentioned in the documentation.

Yes, agreed angular-1.3.17 is old and we are in the process of upgrade. When the new design with angular >2.0 is ready, it would take a while.

Am using the documentation provided here in elastic RUM section - Getting started | APM Real User Monitoring JavaScript Agent Reference [1.x] | Elastic
npm install elastic-apm-js-base --save

Angular followed below packages -

npm i @elastic/apm-rum-angular@1.2.3

npm i @elastic/apm-rum

npm i @elastic/apm-rum-core

NgModule, BrowserModule, Routes, RouterModule, ApmModule, ApmService

NgModule } from 'node_modules@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Routes, RouterModule } from '@angular/router'
import { ApmModule, ApmService

Appreciate your help !

5

hi @carly.richmond ,

Not sure where to start with the implementation.

6

I'm not 100% sure if the AngularJS is supported by the agent, but hopefully someone else will chime in to confirm.

What versions of @elastic/apm-rum and @elastic/apm-rum core are you installing? If you are installing the latest @elastic/apm-rum and @elastic/apm-rum-core alongside @elastic/apm-rum-angular@1.2.3 I think you will have an incompatibility issue, which does look to be the case as your error is complaining about Angular 2+ modules.

8

hi @carly.richmond ,

Please help me with the pointers, from where can I download and install @elastic/apm-rum and @elastic/apm-rum-core which is compatible with @elastic/apm-rum-angular@1.2.3.

Any steps would appreciate as am bit new to Angular Integration to elastic APM

9

Digging around in the release on GitHub, I think you need the following:

This is purely a guess! However you should be able to install with npm.

However, one concern I have is the peer dependencies state angular 8+.

10

hi @carly.richmond ,

Please help me with these messages as getting as warning , while installing elastic APM packages

Is this due to incompatibility issues ? Please help in this regard

npm i @elastic/apm-rum-angular@1.2.3 -

 npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'jivacore.ngui@1.2.0',
npm WARN EBADENGINE   required: { node: '>=0.12.04' },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'npm@1.1.71',
npm WARN EBADENGINE   required: { node: '>=0.6', npm: '1' },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'tar@0.1.14',
npm WARN EBADENGINE   required: { node: '~0.5.9 || 0.6 || 0.7 || 0.8' },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }

npm i @elastic/apm-rum-core@5.11 -

 npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'jivacore.ngui@1.2.0',
npm WARN EBADENGINE   required: { node: '>=0.12.04' },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'npm@1.1.71',
npm WARN EBADENGINE   required: { node: '>=0.6', npm: '1' },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'tar@0.1.14',
npm WARN EBADENGINE   required: { node: '~0.5.9 || 0.6 || 0.7 || 0.8' },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }

npm i @elastic/apm-rum@5.8.0

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'jivacore.ngui@1.2.0',
npm WARN EBADENGINE   required: { node: '>=0.12.04' },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'npm@1.1.71',
npm WARN EBADENGINE   required: { node: '>=0.6', npm: '1' },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: 'tar@0.1.14',
npm WARN EBADENGINE   required: { node: '~0.5.9 || 0.6 || 0.7 || 0.8' },
npm WARN EBADENGINE   current: { node: 'v18.17.1', npm: '9.6.7' }
npm WARN EBADENGINE }
11

hi @carly.richmond ,

Am seeing these errors in browser not sure why when the elastic APM - Angular packages are installed.

Like this for all the modules mentioned in the code below
image

import { NgModule } from 'node_modules/@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Routes, RouterModule } from '@angular/router'
import { ApmModule, ApmService } from '@elastic/apm-rum-angular'

/* const routes: Routes = [
{ path: 'contact', component: ContactListComponent },
{ path: 'contact/:id', component: ContactDetailComponent }
] */

@NgModule({

imports: [ApmModule, BrowserModule, RouterModule.forRoot(routes)],
declarations: [AppComponent, ContactListComponent, ContactDetailComponent],
providers: [ApmService],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(service: ApmService) {
// Agent API is exposed through this apm instance
const apm = service.init({
serviceName: 'angular-app',
serverUrl: 'http://POCWQAAPM:8200'
})
}
}

12

Hi @Dixit,

This is down to incompatibility. It looks link apm-rum-angular isn't compatible with AngularJS, which does makes sense given the concern I raised before with the Angular 8 peer dependency. NgModule originates from Angular 2+.

I've not tried to instrument an AngularJS application myself as it's long post EOL, and I'm not confident the agent supports it. I would recommend upgrading to a supported version of Angular as soon as possible and add the instrumentation then, which you are already doing.

As a last resort, you could try removing @elastic/apm-rum-angular and @elastic/apm-rum-core dependencies and do a simple vanilla JS RUM install using the documentation here. Disclaimer, I've not tried this!