Mezzurite-Angular
For Angular 6, use @microsoft/mezzurite-angular@2.x
Requirements:
"dependencies": {
"@microsoft/mezzurite-core": "^1.0.1",
"@types/angular": "^1.6.51",
"@types/jquery": "^2.0.46",
"@types/node": "^10.12.2",
"intersection-observer": "^0.5.1",
"reflect-metadata": "^0.1.8"
},
"peerDependencies": {
"@angular/common": ">2.4.0",
"@angular/compiler": ">2.4.0",
"@angular/core": ">2.4.0",
"@angular/forms": ">2.4.0",
"@angular/http": ">2.4.0",
"@angular/platform-browser": ">2.4.0",
"@angular/platform-browser-dynamic": ">2.4.0",
"@angular/router": ">3.4.0",
"core-js": "^2.4.1",
"rxjs": "^6.2.2",
"zone.js": "^0.x"
},
Onboarding
Basic Setup (Application Load Time)
- Import the following modules in app.module:
import { AngularPerfModule, RoutingService } from '@microsoft/mezzurite-angular';
- In the NgModule imports, add the following:
Imports: [ AngularPerfModule.forRoot() ]
- In the constructor of AppModule, add the following:
export class AppModule {
constructor(@Inject(RoutingService) private router: typeof RoutingService) {
router.start();
}
}
- If using sub-modules inside your app, you will need to import AngularPerfModule inside each sub-module in order to give your entire app access to the Mezzurite directive:
Imports: [ AngularPerfModule ]
Component Tracking (CLT and VLT)
Components are instrumented inside the html markup as an attribute directive:
<div mezzurite component-title='MyComponentName'>
...
</div>