- Download or clone this project repository.
- Install NPM, Node, and angular-cli
- Go into the project directory and run
npm install && ng serve
- The app is now available at http://localhost:4200/
- Open src/index.html
- Modify the line that reads
window["adrum-app-key"] = "FOO-BAR-BAZ";
to use your correct EUM app key. - Save this file and reload the web app. Click between the pages.
- Use your browser's dev tools to see calls going to AppDynamics. You should also see Console debug messages when you change pages.
We have to modify 2 files to capture all of the Angular 2 route changes.
src/index.html
<script>
// Manually change this value
window["adrum-app-key"] = "FOO-BAR-BAZ";
window["adrum-start-time"] = new Date().getTime();
</script>
<!-- You can choose to pull the file from the AppDynamics CDN or host the file yourself. You must change this file location if you're hosting the file yourself. -->
<script src="https://cdn.appdynamics.com/adrum/adrum-latest.js"></script>
src/app/app-routing.module.ts
// Paste in this variable. This will throw an error if you haven't added the adrum.js to index.html.
declare var ADRUM : any;
export class AppRoutingModule {
vpView: any;
// Subscribe to the Router URL changes.
constructor(public router:Router) {
this.router.events.subscribe((event:Event) => {
if (event instanceof NavigationEnd) {
console.debug('NavigationEnd: '+event.url);
this.vpView.markViewChangeEnd();
this.vpView.markViewDOMLoaded();
this.vpView.markXhrRequestsCompleted();
this.vpView.markViewResourcesLoaded();
this.vpView.end();
ADRUM.report(this.vpView);
} else if (event instanceof NavigationStart) {
console.debug('NavigationStart: '+event.url);
this.vpView = new ADRUM.events.VPageView();
this.vpView.start();
this.vpView.markViewChangeStart();
}
});
}
}
This project was generated with angular-cli version 1.0.0-beta.30.
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Run ng generate component component-name
to generate a new component. You can also use ng generate directive/pipe/service/class/module
.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the -prod
flag for a production build.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via Protractor.
Before running the tests make sure you are serving the app via ng serve
.
Run ng github-pages:deploy
to deploy to GitHub Pages.
To get more help on the angular-cli
use ng help
or go check out the Angular-CLI README.