Introduce
Angular is indeed a framework that prides itself on having an extremely rich ecosystem – with tools built not only from the core team but also from the community.
In this article, I will list some useful tools when working with Angular.
I will divide the list into 3 parts
- Development Tools
- Libraries
- Testing
Let’s start!
Development Tools
1. Angular State Inspector
Compared to Augury (more famous), this tool does one thing and does it very well: it allows status checking on the scope of each DOM element.
By right-clicking a method or an attribute, you can store it in the console as a global variable, giving you programmatic access to any component right from your console.
It integrates with Chrome Dev Tools, it’s fast and lightweight. If you need something more full featured, you might like Augury, but keep in mind that it will be a much slower experience.
2. Bit
Bit (Github) is a CLI tool and a component hub that allows you to push reusable components directly from any Angular project to a shared collection in bit.dev.
Bit is particularly useful as a way to build a component library, gradually and collaboratively. It allows you to export reusable components to a shared collection. No need to add repo or endless configuration.
Components can be viewed directly on Bit, installed using NPM / Yarn or collaborated, bit imported.
Bits are very simple to use. No more than a few simple instructions are required to export one or more components from any code base to the collection in bit.dev .
For example:
Set up a Bit workspace and log in:
1 2 3 4 5 6 7 8 9 | // cài đặt Bit globally $ npm i bit-bin -g // cài đặt Bit workspace cho project của bạn $ bit init // đăng nhập tài khoản $ bit login |
Configure the compiler, keep track of the components, and let Bit build and test each element in an isolated environment (to make sure they are actually reusable):
1 2 3 4 5 6 7 8 9 | // install an Angular compiler $ bit import bit.envs/compilers/angular --compiler // add your component and set an entry point $ bit add src/app/my-comp --main src/app/my-comp/my-comp.module.ts // tag all components (test, build & lock version) $ bit tag --all 1.0.0 |
3. Stackblitz
Stackblitz has become a practical tool for Angular developers to write code (or even comprehensive applications) entirely in a browser-based editor.
If you want to quickly test ideas, share demos and excerpts or write code while you are away from your computer, Stackblitz lets you build full applications in your browser.
Libraries
4. Angular CDK / Material
Perhaps it needs no introduction, but in case you didn’t know, Angular Material is probably the best component library available.
Although the list of components is not very high, each component is meticulously crafted to the smallest detail: a lot of accents have been included to make the components highly accessible and usable – That’s something that not all component libraries actually serve.
If you don’t need a component library, we can also use CDK independently: if you need drag and drop, scroll, focus management, and more, CDK is the perfect solution.
It is internally used by Angular Material but has been extracted into its own project so it can be easily reused if you already have your own library, which makes it a great companion. perfect.
5. FlexLayout
FlexLayout is also an officially supported library that helps create responsive applications thanks to API declarations.
If the name is not clear, FlexLayout will convert the instructions into Flexbox properties. Flexbox is not the easiest system to work with, but FlexLayout making it work with it is a real pleasure.
FlexLayout provides a list of high-level directives converted into inline CSS rules. Basically, you can build an entire application without having to use any CSS!
6. Ngx-Bootstrap
If your company or customers use a Bootstrap based design system, chances are you’ll use this library created by Valor Software .
The library provides a large number of native Angular components that allow you to use Bootstrap without relying on the companion jQuery library.
7. Transloco
With unexplained ngx-translate and the core Angular i18n offering limited solutions (at least at the time of writing), Transloco has become my favorite tool for adding i18n capabilities to applications. use.
In addition to the standard features we expect (JSON translation files, structure indicators, pipes and services), Transloco also adds support for L10N, comments for translators, using multiple languages at the same time, Support SSR and key manager.
Thanks to integration with Angular CLI, it takes only 1 command to get started. At this point it’s hard not to recommend!
8. NgRx / Akita / NgXs
Choosing a state management library for Angular is not an easy task for this article.
Although I mainly work with NgRx, I think these three libraries are equally valuable – and ultimately, depending on the individual opinion you should choose. It would be unfair to remove any of them. My suggestion is to try all of them and see which one fits your style better.
If your application is quite complex and you think it might need a state management class, any Rx-support library will help you get familiar with the state of your application.
Testing
9. Spectator
The Angular test is sometimes verbose and requires a lot of editing tools: Spectator allows you to skip a lot of repetitive code by providing a set of utilities that speed up the task of writing unit tests exponentially.
Not only will the Spectator make writing tests much faster, but thanks to the API’s clearness, the code will also be extremely readable, with all of the (sometimes somewhat confusing) unit testing APIs hidden behind the library.
10. Angular Testing Library
Inspired by the React Testing Library’s approach , this unit testing library takes a different approach from the existing methods.
This library does not encourage checking details of deployment from your components as much as possible: instead of focusing on the component instance itself and allowing it to interact with the component programmatically, this library helps you work. with DOM as easy as possible.
It provides keyboard shortcuts for rendering large components and APIs to interact with DOM nodes instead of the internal parts of a component. Therefore, if your implementation changes but the behavior stays the same, your tests will continue to work smoothly.
11. Angular Benchpress
Deep inside the Angular repository is this great tool built to perform automated performance testing on the Angular framework.
If performance is an important part of your business, automated testing with Angular Benchpress can certainly be a great tool in your technology stack, especially if E2E tests are available. Your is written in Protractor.
Just by running the Protractor test, it is possible to create scenarios where the engine will repeat a number of times and will report the performance figures from the V8 engine in a readable format.
Even if it is simply a benchmark for your libraries or if you are curious to know which strategy is more effective, this tool can certainly be quite helpful.
Source: https://blog.bitsrc.io/