cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Not a customer? Start a free trial

Click the Start a free trial link to start a 15-day SaaS trial of our product and join our community as a trial user. If you are an existing customer do not start a free trial.

AppDynamics customers and established members should click the sign in button to authenticate.

Knowledge Base

Basic TypeScript Angular 2 Application Structural Example With EUM JS API

 Assuming the following application structure. Please note that there are several important elements missing from the list required to make a functional Angular 2 app.

src \
  - favicon.ico
  - index.html
  - systemjs.config.js
  app \
    - app.component.html
    - app.component.css
    - app.component.ts
    - app.module.ts
    - app.routing.ts
    - main.ts
    - test.component.html
- test.component.css
- test.component.ts
  assets \
    - adrum-config.js
    - adrum.js
    - adrum-ext.js

// index.html

<html>
<head>
  <base href="/">
  <title>Mp Test App</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="node_modules/core-js/client/shim.min.js"></script>
  <script src="node_modules/zone.js/dist/zone.js"></script>
  <script src="node_modules/reflect-metadata/Reflect.js"></script>
  <script src="node_modules/systemjs/dist/system.src.js"></script>
  <script src="assets/adrum-config.js"></script>
  <script src="systemjs.config.js"></script>
  <link href="resets.css" rel="stylesheet">
  <script>
        System.import('app').catch(function(err){ console.error(err); });
    </script>
</head>
<body>
  <mp-app>Loading...</mp-app>
</body>
</html>

// adrum-config.js

window['adrum-start-time'] = new Date().getTime();
(function(config){
    config.appKey = 'EUM-APP-KEY';
    config.adrumExtUrlHttp = 'assets';
    config.adrumExtUrlHttps = 'assets';
    config.beaconUrlHttp = 'http://eum-collector.example.com:7001';
    config.beaconUrlHttps = 'https://eum-collector.example.com:7002';
    config.xd = {enable : true};
})(window['adrum-config'] || (window['adrum-config'] = {}));
if ('https:' === document.location.protocol) {
    document.write(unescape('%3Cscript')
  + " src='assets/adrum.js' "
  + " type='text/javascript' charset='UTF-8'"
  + unescape('%3E%3C/script%3E'));
 }
else {
    document.write(unescape('%3Cscript')
  + " src='assets/adrum.js' "
  + " type='text/javascript' charset='UTF-8'"
  + unescape('%3E%3C/script%3E'));
 }

 // main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

// app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { TestComponent } from './test.component';
import { routing } from './app.routing';

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpModule,
    routing
  ],
  declarations: [
    AppComponent,
    TestComponent    
],
  providers: [
    ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule {}

// app.component.html

<nav>
  <a routerLink="/">
  LINK
  </a>
</nav>
<section>
  <header>
    <h1>TEST</h1>
  </header>
  <router-outlet></router-outlet>
</section>

// app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'mp-app',
  templateUrl: 'app/app.component.html',
  styleUrls: ['app/app.component.css']
})
export class AppComponent {
}

// test.component.ts

import { Component, Inject } from '@angular/core';
import { Router } from '@angular/router';
import { lookupListToken } from './providers';

declare var ADRUM: any;
var vpView = new ADRUM.events.VPageView();

@Component({
  selector: 'test',
  templateUrl: 'app/test.component.html',
  styleUrls: ['app/test.component.css']
})
export class TestComponent {
  form;

  constructor(
    private formBuilder: FormBuilder,
    @Inject(lookupListToken) public lookupLists,
    private router: Router) {}

  ngOnInit() {
    vpView.start();
    // mark start of vp
    vpView.markViewChangeStart();
    // mark view change start
    }

  ngOnChanges() {
    .....
    }  

  ngOnDestroy() {
    vpView.markViewChangeEnd();
    // mark view change end
    vpView.markViewDOMLoaded();
    // mark dom loaded
    vpView.markXhrRequestsCompleted();
    // mark xhrs completed
    vpView.markViewResourcesLoaded();
    // mark resources loaded    
    vpView.end();
    // mark end of vp
    ADRUM.report(vpView);
    // report vp
    }

}

// app.routing.ts

import { Routes, RouterModule } from '@angular/router';
import { TestComponent } from './test.component';

const appRoutes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'all' }
];

export const routing = RouterModule.forRoot(appRoutes);

export class AppRoutingModule {
constructor(router:Router) {
var vPageView = new ADRUM.events.VPageView();

router.events.forEach((event: NavigationEvent) => {
// NavigationStart
var absoluteURI = ADRUM.utils.getFullyQualifiedUrl(event.url);
if(event instanceof NavigationStart) {
console.log(ADRUM.utils.getFullyQualifiedUrl(event.url));
vPageView = new ADRUM.events.VPageView({
url: absoluteURI,
});
console.log("init adrum pg");
vPageView.start();
vPageView.markViewChangeStart();
console.log(vPageView);
}

// NavigationEnd
if (event instanceof NavigationEnd) {
//give it 0.5s
setTimeout(function(){
console.log("NavEnd");
vPageView.markViewChangeEnd();
vPageView.markViewDOMLoaded();
vPageView.markXhrRequestsCompleted();
vPageView.markViewResourcesLoaded();
vPageView.end();
ADRUM.report(vPageView);
console.log(vPageView);
}, 500);

}
// NavigationCancel
// NavigationError
// RoutesRecognized
});
}

}
Version history
Last update:
‎12-11-2017 04:33 PM
Updated by:
Labels (1)


Found this article helpful? Click the Thumbs Up button.
Have an additional comment? Post it below.
By replying you agree to the Terms and Conditions of the AppDynamics Community.
0 Kudos