Libraries
Below is a curated list of production-ready and battle-tested libraries recommended for Angular developers, with their pros and cons. These libraries are widely used in the community and can help you build robust, efficient applications faster.
If a library is not listed here, it doesn't mean it's bad or not recommended. It just means that we haven't had the chance to evaluate it yet.
General guidelines
Do use as few dependencies as possible.
Each dependency you add to your project increases the complexity, the size of your application and the maintenance cost. Keeping your dependencies up to date will be more and more time consuming. It's important to carefully evaluate each dependency and only include those that are absolutely necessary and worth the trade-off.
Do choose a library carefully and knowingly.
Libraries can rapidly evolve and change over time. They can be deprecated, abandoned, refactored, or replaced by better alternatives. Having an outdated or poorly maintained library in your project can lead to security vulnerabilities, bugs, and compatibility issues that prevent you from upgrading to the latest version of Angular or other libraries.
Replacing a library can be a painful and time-consuming process, especially if it is deeply integrated into your application. It can require significant refactoring and testing to ensure that everything works correctly with the new library.
Beware of trends and hype cycle, when building a long-term large application, aim for libraries that are:
- Functional: offers the features you need
- Mature and stable: tried and tested by others
- Actively maintained: regular improvements, bug fixes, security patches, ...
- Long-term supported (LTS): guaranteed support for a certain period of time
- Compatible: with other tools in your application
- Popular: for useful community resources and to attract/keep qualified developers. A library with a large user base is more likely to be maintained in the long run.
Run tests or proof of concept to compare solutions and ensure that the chosen one is right for you.
Avoid mixing multiple libraries that serve the same purpose.
UI components
✅ Angular Material: the official Angular component library that implements Material Design. It provides essential UI components and is well-maintained by the Angular team.
- ✅ High quality components
- ✅ Always up to date with Angular releases
- ✅ Strong accessibility
- ✅ Good documentation
- ❌ Limited customization, enforced Material Design style
- ❌ Some missing components (Input file, tree table, ...)
✅ PrimeNG: Feature-rich, customizable UI component suite with a wide variety of widgets and themes, maintained by PrimeTek.
- ✅ Wide range of components
- ✅ Highly customizable
- ✅ Tailwind CSS integration
- ❌ Paid Long Term Support (LTS)
- ❌ Good quality components, but not as polished and stable as Angular Material
✅ NG-ZORRO: Feature-rich UI component library based on Ant Design.
- ✅ Wide range of components
- ❌ Less popular, smaller community
❌ Spartan: promising library but not yet production-ready, you should avoid it for the time being.
Headless UI
Headless UI library provide functional UI logic without any styling or markup, allowing developers full control over how components look, while still handling how they behave. They usually come with a set of primitives that handle behavior logic, state management and accessibility, giving you maximum visual flexibility.
Headless UI libraries are not so popular and advanced in the Angular ecosystem compared to others like React (see shadcn, Radix, TanStack, HeadlessUI, etc.). There aren't many viable solutions, but they are evolving and still worth considering.
✅ Angular CDK: The Component Development Kit (CDK) is a set of low-level primitives for building UI components, such as overlays, drag-and-drop, and accessibility features.
- ✅ High quality primitives
- ✅ Well-maintained by the Angular team
- ❌ Not a complete headless UI library, insufficient on its own
Angular CDK can be used with any UI component library, not just Angular Material. It's useful for building custom components that your component library doesn't provide.
Styling
✅ Tailwind CSS: utility-first CSS framework that provides low-level utility classes to build custom designs.
✅ Bootstrap: CSS framework that provides a set of pre-designed components and utilities.
❌ PrimeFlex: project has stopped and no longer receive development or maintenance.
State management
✅ NgRx: reactive state management library that provides a global store inspired by Redux, but also a simpler signal-based store.
❌ TanStack Query: the Angular adapter is not yet production-ready, but worth keeping an eye on.
❌ Akita: no longer maintained.
OpenAPI code generation
✅ Orval with Angular client
- ✅ Zod integration
- ✅ Mocking support
✅ OpenAPI Generator with typescript-angular generator
- ❌ Requires Java to run
- ❌ Infrequent updates of the typescript-angular generator
Internationalization (i18n)
✅ Angular built-in i18n: compile-time internationalization library that is part of Angular.
- ❌ Does not support runtime language switching (needs window refresh)
Angular i18n generates translation files from your source code but does not merge existing translations files with new ones. We recommend using ng-extract-i18n-merge to handle that.
- ✅ Supports runtime language switching
- ✅ Supports runtime language switching
Icons
Authentication
Charts
Testing
Testing framework
The Angular testing ecosystem is currently in a transitioning state. Officialy supported tools are deprecated, and the community is actively exploring modern alternatives. Expect recommendations and best practices to evolve in the near future as the ecosystem stabilizes.
✅ Karma is the pre-installed test runner with Jasmine as the assertion library.
- ✅ Officially supported by Angular
- ✅ Real browser testing
- ❌ Deprecated and no longer maintained
- ❌ Slow
- ❌ Angular support will probably drop in future releases
Even if Karma is deprecated, it is still a valid option as it's the only officially supported framework, and it gets the job done. Other options may or may not be supported in the future, they are currently not as well integrated with Angular and may require additional configuration to work.
✅ Vitest
- ✅ Fast
- ❌ Experimental real browser testing
- ❌ No official Angular support
✅ Jest
- ✅ Fast
- ❌ Experimental Angular support
- ❌ Not real browser testing (uses JSDOM)
- ✅ Real browser testing
- ❌ Experimental Angular support
End-to-end testing (e2e)
✅ Cypress
❌ Protractor: deprecated and no longer maintained.