11 Top Angular Developer Tools for 2020
Top favorite Angular libraries and tools you should definitely try.
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.
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.
I split the following list into three categories:
- Development Tools
- Libraries
- Testing
Let’s start!
Also read:
Development Tools
1) Angular State Inspector
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.
2) Bit
The bit.dev platform is a great way for Angular developers to build their shared component library, by harvesting components from their apps. It removes 90% of the overhead, it’s scalable, and it’s collaborative; You can learn more about the advantages of a Bit.dev UI library here.
Bit.dev leverages Bit, an open-source CLI tool, to let you version and push independent components from any local project to a remote collection on Bit.dev- where they become organized and can be used anywhere.
If a component library is like a CD music-album — static and cumbersome- you can think of your Bit.dev collection as a dynamic “Component Playlist”.
Meaning, you can search, play, install and even update any component from any new project your team are working on. On the platform, features like auto component-docs, rendered sandbox and more are all available out-of-the-box.
Since Bit handles the isolation of components, you can also use it to build, test and render each component in full isolation- outside of its parent repository. That’s very useful for gradually making your components more reusable, harvesting them to your collection, and using them to compose UI apps.
Bit is simple to use. It takes no more than a few simple Git-like commands to export a component from any codebase to a collection in bit.dev.
For example:
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 Bit.dev 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):
// 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
// export your components to your Bit.dev collection!$ bit export user-name.collection-name
3) Stackblitz
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.
Libraries
4) Angular CDK / Material
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.
5) FlexLayout
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!
6) Ngx-Bootstrap
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.
7) Transloco
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!
8) NgRx / Akita / NgXs
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.
Testing
9) Spectator
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!
10) Angular Testing Library
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.
11) Angular Benchpress
Deep down in the Angular repository lies this cool tool built to perform automated performance testing on the Angular framework.
If performance is an important part of your business, automated testing thanks to Angular Benchpress could definitely be an awesome tool in your tech stack, especially if your E2E tests are written with Protractor.
By simply running Protractor tests, it’s possible to create scenarios that the tool will repeat for a number of times and will report the performance metrics from the V8 engine in a readable format.
Even if it’s to simply benchmark your libraries or if you’re curious to know what strategy is more performant, this tool could definitely be quite helpful.
Final Words
This is only a subset of the big Angular ecosystem — but it’s the list of tools I confidently used in the past and that I am happy to recommend. If you’re an Angular developer looking to boost productivity and quality, these tools will become your best friends.
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!
If you need any clarifications, or if you think something is unclear or wrong, do please leave a comment!
