- Run Angular In Vs Code
- Angular Visual Studio Code Example
- Angular Visual Studio Code Extensions
- Angular Visual Studio Code
AngularTools is a collection of tools for exploring an Angular project, help you with documenting, reverse engineering a project or help when refactoring.
Debugging Angular Project Configuration Generate Application Debugging Debug with Visual Studio Code Configure Launchers Run Launchers Debug with npm README.md Debugging Angular.
Some of the tools may seem very basic, but can be a powerful help when you have them right at your fingertips.
Find it on the Visual Studio Code marketplace.
Type angular.version to access the Javascript object that holds angular version. For Angular 4+ There is are the number of ways as listed below: Write below code in the command prompt/or in the terminal in the VS Code. (up to 3) ng version or ng -version (Find the image for the reference). Extension for Visual Studio Code - AngularTools is a collection of tools for exploring an Angular project, help you with documenting, reverse engineering a project or help when refactoring.
Features
- Show the module hierarchy
- Show the dependency injection graph
- Show the component hierarchy
- Save the graphs as png, dgml or dot files
- Summarizes all the Angular modules
- Generate a markdown file with the component hierarchy in Mermaid format.
- Show the directory structure of the project
- Generate list of packages used in the project
- List all imports
Below is a detailed description of each feature.
Show the module hierarchy #
The 'Show module hierarchy' command is used for visualizing the hierarchy of the modules in an Angular application. The command scans all the *.ts files in the project to identify classes decorated with the @NgModule class decorator and then visualize how each module is imported by other modules. It will also visualize the classes specified in the imports and the exports section of the NgModule definition.
In the visualization the classes will be colored depending on the class decorator of each class:
- Modules are red
- Components are blue
- Pipes are yellow
- Directives are green
Show the dependency injection graph #
The 'Show a graph representing the components and the injected dependencies' command generates a directed graph representing the components and the services injected into the components of an Angular application. The command scans all *.ts files of the application and for each class decorated with the @Component decorator, it analyses the constructor and each field in the class to identify all injected classes and to identify all the fields decorated with the Input, Output, ViewChild, ViewChildren, ContentChild and ContentChildren decorators.
In the visualization the components will by default be colored dark blue and the injected classes will be colored light blue.
Show the component hierarchy #
The 'Show the component hierarchy' command is used for visualizing the component hierarchy and Angular application. It analyses all the *.component.ts files and all the corresponding template files to determine how the component use each other and then generates a directed graph showing the component hierarchy.
The command uses a vscode webview extension component to render the hierarchy using html, javascript and the Vis.js javascript library. This has the downside that copying the generated graph to the clipboard is not yet possible due to limitations in the vscode extension api. So to overcome this limitation the generated graph can be saved as a Png file to the root of the project you are analyzing. You can also save the graph in the Dgml format or in the GraphViz Dot format.
Save as GraphViz dot format and generate a graph from the dot file:
You can also choose to save a selection from the graph as shown in the example below.
By default the component hierarchy graph is rendered using a random layout. You can change the layout method to use a hierarchical layout to line up the nodes in the graph in different ways and also change how the layout engine sorts the nodes in the graph. This is all done by checking the 'Change layout' checkbox to show the drop down boxes with the available options.
Run Angular In Vs Code
Generate a markdown file with the component hierarchy in Mermaid format #
This command will generate the component hierarchy in markdown format using Mermaid notation.
Please notice that some online tools and sites do not support Mermaid markdown format yet, like GitHub and Visual Studio Code. To preview markdown files using the mermaid notation in Visual Studio Code i'm using the Markdown Preview Mermaid Support extension.
Generate a markdown file that summarizes all the Angular modules #
This command will scan all *.ts files in the workspace folders and find those classes that are decorated with the '@NgModule' class decorator and parse the module definition and then summarize each module into a markdown file.
The summarization will consist of two parts: First a table listing how many imports, exports, declarations and so on each module contains. The second part shows what each module contain.
Show the directory structure of the project #
This command lists the entire directory structure of the currently open project. Sometimes this can be a quick way to get an overview of the project if you are new to the project before og maybe need to document it.
The directory structure will be listed in the output window for the AngularTools extension for easy copy/pasting.
Generate list of packages used in the project #
Sometimes your boss or a customer requires documentation of which packages is used in the project. This command can save you a lot of tedious manual work by analyzing the package.json file and for each referenced package queries the npmjs.com website to fetch the description for the package and from that generates a Markdown file with a table of the packages with their descriptions.
The license information is retrieved from the package.json file for each package in the node_modules folder in the root of the workspace, this mean that the license will show 'N/A' if you have not run the 'npm install' yet.
List all imports #
This command will analyse all Angular components in the project and collect all the imports of the components together with the number of times the imported component is used. This can be useful when refactoring or identifying frequently used modules. Usually frequently used modules needs extra attention or care before being changed during refactoring. You can also use the command to identify modules that are not referenced in a consistent way where some components are using relative path and some components using path-aliases.
Settings
In the Visual Studio Code settings you find under File --> Preferences --> Settings, under Extensions, there is a section with all the settings for AngularTools. It is possible to change the default filenames used when the extension saves a file to the workspace folder. You can change how the component hierarchy graph nodes are rendered, the edge endings, the color of the root nodes and a lot more.
See the full list of settings below the screenshot.
| Setting | Description |
|---|---|
| angularTools.excludeDirectories | Semicolon separated list of directories that should be excluded when scanning for for Angular components. |
| angularTools.dgmlGraph.graphLayout | This is the algorithm used to layout the nodes of the graph. Sugiyama wil try to avoid crossing edges as far as possible. ForceDirected will try to cluster the nodes. |
| angularTools.dgmlGraph.graphDirection | This will make the layout algorithm position the graph nodes in the specified direction. |
| angularTools.dependencyInjectionGraph.pngGraphFilename | The default name used when saving the dependency injection hierarchy graph to a Png file. |
| angularTools.dependencyInjectionGraph.dgmlGraphFilename | The default filename used when saving a dependency injection hierarchy graph to a Directed Graph Markup Language (Dgml) file. |
| angularTools.dependencyInjectionGraph.edgeArrowToType | The default ending of the edges. |
| angularTools.showComponentHierarchy.componentHierarchyPngFilename | The default name used when saving the component hierarchy to a Png file. |
| angularTools.showComponentHierarchy.componentHierarchyDgmlGraphFilename | The default name used when saving the component hierarchy to a Dgml file. |
| angularTools.showComponentHierarchy.edgeArrowToType | The default ending of the edges. |
| angularTools.showModuleHierarchy.moduleHierarchyPngFilename | The default name used when saving the module hierarchy to a Png file. |
| angularTools.showModuleHierarchy.moduleHierarchyDgmlGraphFilename | The default name used when saving the module hierarchy to a Dgml file. |
| angularTools.showModuleHierarchy.edgeArrowToType | The default ending of the edges. |
| angularTools.graphSelection.graphSelectionGuidelineColor | The color of the guidelines used when selecting part of a component hierarchy graph. The string should be in rgb format or standard css color names. |
| angularTools.graphSelection.graphSelectionGuidelineWidth | The width of the guide lines shown when selecting part of a component hierarchy graph |
| angularTools.graphSelection.graphSelectionColor | The color of the selection rectangle used when selecting part of a component hierarchy graph. The string should be in rgb format or standard css color names. |
| angularTools.graphSelection.graphSelectionWidth | The width of the selection rectangle shown when selecting part of a component hierarchy graph |
| angularTools.graphNodes.rootNodeBackgroundColor | The color of the root nodes of the component hierarchy graph. The string should be in rgba format or standard css color names. |
| angularTools.graphNodes.rootNodeNodeShape | The default shape of the nodes representing root nodes. Notice that 'ellipse','circle','database','box' and 'text' have the label inside the shape, the rest have the label outside the shape. |
| angularTools.graphNodes.componentNodeShape | The default shape of the nodes representing components. Notice that 'ellipse','circle','database','box' and 'text' have the label inside the shape, the rest have the label outside the shape. |
| angularTools.graphNodes.moduleNodeBackgroundColor | The default color of the nodes representing modules. |
| angularTools.graphNodes.moduleNodeShape | The default shape of the nodes representing modules. Notice that 'ellipse','circle','database','box' and 'text' have the label inside the shape, the rest have the label outside the shape. |
| angularTools.graphNodes.pipeNodeBackgroundColor | The default color of the nodes representing pipes. |
| angularTools.graphNodes.pipeNodeShape | The default shape of the nodes representing pipes. Notice that 'ellipse','circle','database','box' and 'text' have the label inside the shape, the rest have the label outside the shape. |
| angularTools.graphNodes.directiveNodeBackgroundColor | The default color of the nodes representing directives. |
| angularTools.graphNodes.directiveNodeShape | The default shape of the nodes representing directives. Notice that 'ellipse','circle','database','box' and 'text' have the label inside the shape, the rest have the label outside the shape. |
| angularTools.graphNodes.injectableNodeBackgroundColor | The default color of the nodes representing injected components. |
| angularTools.graphNodes.injectableNodeShape | The default shape of the nodes representing directives. Notice that 'ellipse','circle','database','box' and 'text' have the label inside the shape, the rest have the label outside the shape. |
| angularTools.graphNodes.maximumNodeLabelLength | The maximum length of the label for the nodes in the hierarchy. If the class name, module definition, module imports, exports, directives or pipes are longer than the specified number of characters, it will be truncated to this length. |
| angularTools.edges.importEdgeColor | The default color of the edges representing imports. |
| angularTools.edges.exportEdgeColor | The default color of the edges representing exports. |
| angularTools.edges.injectableEdgeColor | The default color of the edges representing injectables. |
| angularTools.edges.usesEdgeColor | The default color of the edges representing components using other components. |
| angularTools.packageJsonMarkdownFilename | The default filename used when saving the packages.json as a markdown file. |
| angularTools.projectDirectoryStructureMarkdownFilename | The default filename used when saving the project directory structure as a markdown file. |
| angularTools.componentHierarchyMarkdownFilename | The default name used when saving the component hierarchy to a markdown file. |
| angularTools.modulesToMarkdownFilename | The default name used when saving the project module to a markdown file. |
Third party components and resources
- Vis.js - Used for generating the directed graph for showing the component hierarchy.
- npmjs.com - The extension queries the NpmJs.com api.
Contents
In the previous articles we discussed about : -
In this Lab 3 we will look in to VS code editor which we will be using in our labs.
What is VS Code or Visual Studio Code?
Theoretically you can do Angular with a simple notepad. But then that would be going back to back ages of adam and eve and reinventing the wheel. So we will need some kind of tools by which will help us to type HTML easily, compile typescript and so on.
That's where Angular 2 Visual Studio code is needed. VS code is a free editor provided by Microsoft which will help us with all automation for HTML, JavaScript, Typescript and so on.
Angular Visual Studio Code Example
So go to https://code.visualstudio.com/download and depending on your operating system install the appropriate one. For instance I am having windows OS so I will be installing the windows version.
Once you download the setup it's a simple setup EXE run it and just hit next , next and finish.
You can also watch this VS code tutorial which will help you to understand
Point number 1 :- All actions happens in a folder
In VS code all source code you put inside a folder. So the first step is to create a folder and point VS code to that folder by clicking on File ➔ Open and select folder shown in the below figure.
Point number 2 :- Creating files and folders
| If you want to create a file or sub folder you can click on the icons as shown in the figure. The first icon creates a file and the second icon creates a folder. |
Point number 3 :- Explorer and Open Editors
The explorer part of VS code has two section one which shows open editors and the other which shows your folder. You can see the image where open editors are shown. You can click on those cross signs to close the open files.
Point number 4:- Reveal in explorer
If you want to browse to the current folder. You can right click on the folder and click on reveal in explorer.
Point number 5: - Integrated terminal
Typescript, Node these frameworks mostly run through command prompts. So it would be great if we can have integrated command line inside VS code. VS code has something called as integrated terminal , you can open the integrated terminal by clicking on view ➔ integrated terminal.
Once you are inside the integrated terminal you can fire 'npm install' , 'tsc' and so on. Below is how the integrated terminal looks like.
Point number 6: - Running multiple terminals
One of the things we always need is running multiple command and for that we need a facility to load multiple terminals.
In VS code we can load multiple terminals by clicking on the plus sign as shown below. So in one terminal you can run the webserver and in the other terminal you can a code review tool.
Point number 7: - Changing to soothing color themes
By default, VS code shows black theme which is very good for health of your eyes. But sometimes to just have more code clarity you would like to change to some more brighter theme. You can do that by clicking on file ➔ preferences ➔ color theme, you would get themes as shown in the below figure.
Point number 8: - VS code settings
VS code has lot of settings like you can hide unwanted files and only focus on the files you want, change icons settings, change font size and so on. To apply a setting, you need to goto File ➔ Preferences ➔ Settings and you would be shown a figure as shown below.
Angular Visual Studio Code Extensions
In this there are two sections one which has the preference SAMPLE CODE SNIPPETS and the second section at what level you want to apply these snippets. You can apply these snippets at two levels one at a project workspace level and other at user / computer level.
If you apply at the workspace level its only for that project and if you apply at the user level it will be applied for all VS code projects in that computer.
For example in the user settings we have pasted the file exclude settings. In this we have specified we do not want to see the '.JS' and '.Map' files in the workspace.
Once that setting is applied you can see the 'JS' and 'Map' files are not seen.
Angular Visual Studio Code
What to do next ?
In the next lab we will look in to module format and module loaders. We will also understand how to use SystemJS for module loading.