In this post, I want to list my favorite tools that I’ve had the pleasure to work with and that I would recommend anyone to give a try "Top 10 Tools, Libraries and Testing for Angular Developer "
There are many development tools that accelerate web ... It provides advanced coding assistance for Angular... In this post, I want to list my favorite tools that I’ve had the pleasure to work with and that I would recommend anyone to give a try "Top 10 Tools, Libraries and Testing for Angular Developer "Introduction
Angular is a framework that boasts an incredibly rich ecosystem — with tooling built not only from the core team but also from the community.
I split the following list into three categories: Development Tools, Libraries and Testing. Let’s start!Development Tools
Stackblitz has become the de-facto tool for Angular Developers to write code snippets (or even full-blown apps) entirely in a browser-based editor.
If you want to quickly test an idea, share demos and snippets, or write any code while you’re away from your own machine, Stackblitz allows you to build full-stack applications fully in your browser.
Bit is especially useful as a way to build a component library, gradually and collaboratively. It lets you export reusable components to a shared collection, as you go. No need for extra repo or endless configurations.
Components can be viewed in Bit’s live playground, installed using NPM/Yarn or even collaborated on, using
Example: Angular components shared (using Bit) on bit.dev
Bit is simple to use. It takes no more than a few simple commands to export a component (or components) from any codebase to a collection in bit.dev.
Set up a Bit workspace and log in:
// install Bit globally $ npm i bit-bin -g // initiate a new Bit workspace in your project $ bit init // login to your account $ bit login
Configure a compiler, track components and let Bit build and test each of them in an isolated environment (to make sure they’re truly reusable):
3. Angular State Inspector
// 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
Compared to the more famous Augury, this component does one thing, and it does it well: it allows to inspect the state on the scope of each DOM element.
By right-clicking on a method, or a property, you can store it to the console as a global variable, which gives you programmatic access to any component right from your console.
It integrates with the Chrome Dev Tools, it’s fast and lightweight. If you need something more fully-featured, you may prefer Augury, but bear in mind it will be a much slower experience.
Storing a Service as a Global VariableLibraries
Choosing a State Management library for Angular was not an easy task for this article.
While I mostly work with NgRx, I reckon that these three libraries are all equally valid — and in the end, it is down to each one’s personal opinion which one to choose. It would be unfair to leave out any of them. My recommendation is to give all of them a try and see which one fits your style better.
If your application is fairly complex and you think it may need a state management layer, any of these Rx powered libraries will help you tame your application’s state.
It probably doesn’t need an introduction, but in case you don’t know it yet, Angular Material is probably the best component library out there — and definitely my favorite one.
While the components list is not very high, each component is crafted to the tiniest detail: a lot of emphases has been put into making the components highly accessible and usable — which is something not all component libraries actually cater out of the box.
If you don’t need the components library, we can also use the CDK independently: if you need drag&drop, virtual scrolling, focus management, and many other utilities, the CDK is the perfect solution. It is used internally by Angular Material but has been extracted into its own project so that it can easily be reused if you already have your own library, which makes it a perfect companion.
With ngx-translate being unmaintained, and the core Angular i18n offering limited solutions (at least at the time of writing), Transloco has become my favorite tool to add i18n capabilities to my applications.
Other than the standard features we would expect (JSON translation files, structural directive, pipe, and service), Transloco also adds support for L10N, comments for translators, using multiple languages in the same time, SSR support and keys manager.
Thanks to the integration with the Angular CLI, it takes only 1 command to get started with. At this time it is hard not to recommend!
If your company or client uses a design system based on Bootstrap, it is very likely that you will be using this library created by Valor Software.
The library provides a large amount of native Angular components that allows you to use Bootstrap without relying on its jQuery library companion.
Due to the number of applications I worked on that used a Bootstrap theme, this library has been fundamental for taking apps off the ground in a matter of minutes.
FlexLayout is also an officially supported library that helps create reactive responsive applications thanks to a declarative API.
If it wasn’t clear by the name, Flex Layout converts directives into Flexbox properties. Flexbox is not the easiest system to work with, but FlexLayout makes working with it a real pleasure.
FlexLayout provides a list of high-level directives that transform into inline CSS rules. You could basically build an entire app without having to use any CSS at all!Testing
Originally inspired by the methodology of React Testing Library, this unit testing library takes a different approach from the other ones available out there.
This library discourages testing implementation details from your components as much as possible: instead of focusing on the component instance itself that allows interacting with the component programmatically, this library helps you to make working with the DOM as easy as possible.
It provides shortcuts to render components and a vast API to interact with DOM nodes rather than the internals of a component. As a result, if your implementation changes but the behavior is preserved, your tests will keep working seamlessly.
Testing Angular is at times verbose and requires a lot of boilerplate: Spectator allows you to skip lots of repeated code by providing a set of utilities that accelerate the task of writing unit tests exponentially.
Not only Spectator will make writing tests much faster, but thanks to its clean API the code will also be extremely readable, with all the unit testing API (at times a little obscure) details hidden behind the library.
It’s the third entry from ngNeat, so kudos to the team!
There are loads of other libraries and tools out there for Angular devs: if you want to share them in the comments below, I’d be very happy to get to know them all!
Thank you !