EOA Frame Trace Visualizer

v.1.0.1-beta

This project was generated with Angular CLI version 11.0.2.

Development server

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.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run npm run build:elements to build the project. The build artifacts will be stored in the elements/ directory. This already uses --prod flag when building.

NPM Deployment

Go to elements folder and run npm publish, to use in another application run npm i frametrace-visualizer.

On the other project add imports * as frametrace from 'frametrace-visualizer'; on the component.ts that you want to use the web component. And on the component.html add <eoa-frametrace-visualizer></eoa-frametrace-visualizer>

You can also directly use the eoa-frametrace-visualizer.js file from elements folder on another project by including it in script tag. See elements/index.html for example.

Web Component Tutorial

Follow this tutorial to create a web component project like this: https://medium.com/@IMM9O/web-components-with-angular-d0205c9db08f