Analyze your Angular app

I have just released my first Visual Studio Extension AngularTools, to the vs-code marketplace and I think it is pretty cool and could help some of you out there.

The motivation

Joining a new team or starting a new job can be a pretty stressful experience with a steep learning curve on getting to know the codebase that the team is working on. I have experienced this every time I started in a new team.

Then a while back when I started on a team that worked on an Angular application, I needed to get an overview of how all the components in the project was using each other.

I started using the DGML editor in Microsoft Visual Studio to draw the component hierarchy. It was tedious and took a long time and of course the project changed frequently making my documentation obsolete very fast. So I automated the task by creating a python script for analyzing the Angular application and generating a DGML file showing the component hierarchy. It worked pretty good and you can have a look at the code here.

The extension

I think Visual Studio Code is awesome and there are so many brilliant extensions out there that make it a very powerful code editor. But I have not been able to find an extension that could visualize an Angular application like the DGML viewer can in Microsoft Visual Studio.

Covid19 hit us all, it got colder as winter approached so more time inside where I found the time to figure out how to create an extension for Visual Studio Code.

Below is an animation showing the main feature of the AngularTools extension. The green nodes are the components not used by any other component, the root nodes of the graph.

How does it work

The main feature of the extension is the 'Show a graph of the component hierarchy' command. It is implemented in two parts, one being a typescript class that is executed when you start the extension command from the Command Palette. This class analyzes all *.component.ts files in the open workspace and generates an internal graph of the component hierarchy. This internal graph is then passed to the second part that is a vscode webview used for rendering the component hierarchy graph using the vis.js JavaScript library.

When the graph has been rendered you can click the 'Save as Png' button to save it to a file in the root of the open workspace. When you click the button the JavaScript in the webview will copy the image data from the html canvas that was created by Vis.js, crop the image and then pass the cropped image data back to the extension context where it can be saved to the root of the workspace.

I hope you found this short introduction to the AngularTools extension interesting and I hope you will give it a try and find it useful.

You can find the code for the extension here.