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
});
}
}
