A few weeks have passed since the last article on "How to get the most out of Angular configuration" and we were left with a promise: explore together the tools with which to "equip" before tackling an Angular project.
Angular DevTools
Finally, as well as React and Vue, Angular also has its official DevTools, which installs as a simple Chrome extension and provides debugging and profiling capabilities for Angular applications. Once installed, the extension will appear in the "Developer Tools" and will consist of two tabs:
- Components: allows you to view the structure of the components that make up the page and edit the status of the components.
-
Profiler: allows you to profile the application and understand the performance bottlenecks in the change detection phase.
Links
Redux DevTools
Another essential tool if you use Angular with NgRx for the application's state management is Redux DevTools. This tool is also installed as a Chrome extension and allows you to inspect changes in the application's Store while running. The screen appears divided into three sections:
- Actions Inspector: allows you to visualize the sequence of actions that are dispatched by the application. It is possible to filter and navigate within the list of actions, with the possibility of executing the "jump" to the state in which the application was in a given moment.
- State Inspector: by clicking on the single action, through the appropriate buttons, it is possible to visualize: the detail of the dispatched action (type and payload), the current state of the store (in Tree, Chart, or Raw view), and the differences between the state of the store of the previous action and that of the selected action.
-
State Recording Navigator: allows you to "play", respecting the timeline of the dispatched actions, the changes made to the state of the store.
Links
Compodoc
Whenever developing an application or library that needs documentation, Compodoc is the right tool for you. This tool allows you to automatically generate the documentation of an Angular project through comments written. Compodoc also allows you to generate a mapping of the routes created and the creation of a navigation menu to navigate between the various components, guards, and interceptors… present within the application.
Installation
- Install the package via the command
npm install - save-dev @compodoc/compodoc
- Create the file tsconfig.doc.json with the following configuration
{
"include": ["src/**/*.ts"],
"exclude": ["src/test.ts", "src/**/*.spec.ts", "src/app/file-to-exclude.ts"]
}
- In the package.json add the script
"compodoc": "npx compodoc -p tsconfig.doc.json"
- Run the previous script to generate the documentation
npm run compodoc
Links
Compodoc Dependency Graph (NGD)
This tool, developed by the same authors of Compodoc, allows you to generate and view the dependencies tree of your Angular application. This helps us to have a clear idea of how modules, components, directives, pipes, etc are connected and dependent on each other.
Installation
- Install the package via the command
npm install -g @compodoc/ngd-cli
- In the package.json add the script
"ngd": "npx ngd -p tsconfig.doc.json -o"
- Run the previous script to generate the dependencies graph
npm run ngd
Links
Source Map Explorer
As our codebase grows in size, you may begin to experience performance degradation upon initial application loading. This can be caused by several factors (and perhaps it would require a separate article), but one of the causes could be related to the installation of a large number of excessively "heavy" dependencies. Source Map Explorer allows you to view a map that indicates the size in bytes of each dependency installed within the application. In this way, we have a clear idea of which dependencies have an excessive impact on our codebase and consequently, we can evaluate to replace them with a "lighter" library.
Installation
- Install the package via the command
npm install - save-dev source-map-explorer
- In the angular.json file edit the following configuration properties
"sourceMap": true,
"namedChunks": true,
- Run the build command
npm run build
- In the package.json add the script
"source-map-explorer": "source-map-explorer dist/your-angular-app-name/**/*.js"
- Run the previous script to generate the source map graph
npm run source-map-explorer
Links
VS Code Extensions
If you are using Visual Studio Code as your code editor, installing the following extensions to improve productivity on Angular applications:
- Angular Language Service: this extension provides great help when editing Angular templates through autocompletion, AOT diagnostic messages (remember to activate the strictTemplates option in the tsconfig.json file), and quick info.
- Angular Snippets: this extension adds snippets to quickly generate: components, directives, guards, modules, pipes, etc.
- DeepCode: DeepCode allows you to find bugs, vulnerabilities, and performance issues through a sophisticated AI-based system.
- Quokka.js: Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.
Conclusions
Tackling an Angular project with the right tools can make a difference in the early stages of a project. In this article, we have introduced you to some of the tools that are part of the "toolbox" of each Devmy project. In the next Angular article, we will discuss one of the greatest allies of any good developer: ESLint and Prettier. We will see together how to configure them on Angular and how to migrate from TSLint to ESLint.
Top comments (0)