@harrisonqian / Awesome › wiki / front-end-development / angular
Public View

Angular

repo: PatrickJS/awesome-angular
category: Front-End Development related: TypeScript · JavaScript · React · Svelte · Vue Js

Awesome Angular Awesome

<p align="center"> <a href="https://patrickjs.com" target="_blank"> <img src="/media/new/awesome-angular.png" alt="Awesome Angular" /> </a> </p>

logo designed by SAWARATSUKI

This is the Awesome list of the Angular framework, and it contains intriguing libraries in the Angular ecosystem for all developers. Something missing? PRs welcomed!

Repo maintained by @jdegand and @patrickjs

Current Angular version: npm version

Contents

Angular

Angular is a web framework that empowers developers to build fast, reliable applications that users love.

Official Resources

Builders

  • Webpack
  • esbuild
  • Angular Builders - This repo consolidates all the community builders (ES Build, Webpack, Jest, Bazel, and Timestamp) for the Angular build facade.
  • Jest Builder
  • Custom Webpack
  • Custom esbuild
  • Bazel - Provides an Angular CLI Builder, which can execute Bazel when triggered by ng build, ng test, etc.
  • Timestamp - This is explained in this article.
  • ngx-build-plus - Extend the Angular CLI's default build behavior without ejecting, e. g. for Angular Elements.
  • ngx-electronify - Angular CLI builder that runs your application in the desktop using Electron.
  • dotenv-run - Seamlessly load environment variables. Supports cli, esbuild, Rollup, Vite, Webpack, Angular, ESM and Monorepos.
  • ng-packagr - Compile and package Angular libraries in Angular Package Format (APF).
  • angular-env-builder - Builder to generate src/environments/environment.ts file based on your environment variables.
  • angular-rspack - Rspack plugin and tooling for Angular applications.
  • ngx-devkit-builders - This package contains Architect builders used to build and test Angular applications and libraries.
  • angular-static-assets-hash - Create a list of Angular static assets and a hash for each file.
  • ngx-schematic-builder - A tool for building Angular schematic projects. Compiles and packages your custom schematics, preparing them for publishing and use.
  • ng-builder-typescript - A builder for the Angular CLI to build Node.js apps using the TypeScript compiler tsc (no Webpack or any other bundler used).

CLI Tools

  • Official website
  • [Official GitHub repository](https://github.com/angular/angular-cli)
  • alterforge - A CLI tool that scaffolds and manages modular microservice architectures with optional React or Angular frontends.
  • @MohamedBouattour/angular-clean-architecture - A CLI tool that generates Clean Architecture–based, production‑ready Angular features with clear, maintainable layers.
  • angular-cli-diff - Easily upgrade your Angular CLI applications from one version to another 🚀.
  • angular-cli-ssr-diff - Easily upgrade your Angular CLI SSR applications from one version to another 🚀.
  • angular-codx-recipe - A Codx recipe for setting up Angular projects quickly and efficiently.
  • angular-parallel-test-runner - CLI to run Angular tests in parallel across projects; uses available CPU cores.
  • angular-web-cli - A flexible CLI tool designed to streamline workflows, automate tasks, and provide customizable utilities for developers.
  • dotairc - This tool helps create consistent instructions for AI assistants working with your codebase.
  • firebase-framework-tools - Experimental addon to the Firebase CLI to add web framework support.
  • js-stack - Modern CLI for scaffolding production-ready JavaScript full-stack projects, with customization and best-practice presets.
  • kqgen - A fast and flexible CLI for generating Angular components and services. Includes presets for tables, filters, and for REST/GraphQL services.
  • lin - Lazy I18N is a CLI tool that translates locale JSONs using LLMs.
  • mcp-angular-cli - A server offering Angular CLI and workspace automation, enabling LLMs and agents to generate components, add packages, create workspaces, and run custom architect targets.
  • nest-schematics - An Angular CLI schematic for generating CQRS (Command Query Responsibility Segregation) modules with hexagonal architecture in NestJS.
  • ng-chrome-extension - Easily create Angular Chrome Extensions (manifest v3).
  • ns-gc - A lightweight command-line tool to generate standalone NativeScript Angular components and Angular services with clean structure and zero config.
  • ngx-create - A lightweight CLI for quickly generating Angular projects with optional frameworks like Material, Tailwind, Bootstrap, and NgRx.
  • ngx-i18n-scan - A CLI tool that scans Angular code to extract and update i18n translation keys, keeping your translation files clean.
  • ngx-stats - CLI tool that analyzes Angular projects, quantifying modules, components, directives, pipes, and services to give a clear structural overview for better architectural insight.
  • ngx-ws - Easily split a large angular.[json](/@harrisonqian/awesome/wiki/miscellaneous/json) into modular, project-local files using the power of JSON References, with the convenience of YAML and JSON5 formats.
  • prepare-angular-json - A lightweight CLI tool that generates a clean angular.[json](/@harrisonqian/awesome/wiki/miscellaneous/json) file from a commented angular.jsonc.
  • rafacli - CLI tool that generates authentication and CRUD modules for NestJS and Angular, automating boilerplate to streamline development and ensure consistency.
  • ngx-crafter - A powerful CLI tool that helps you craft Angular projects with pre-configured folder structures and essential packages.
  • angular-v20-bulk-file-refactor - A CLI tool to automate file renaming and content refactoring to match Angular 20 conventions.
  • ng new command generator - Generate optimized ng new commands.
  • svger-cli - A lightweight CLI that transforms SVGs into optimized Angular components with zero dependencies.
  • tailwind-init-cli - A one-command setup tool for Tailwind CSS in Angular, React, or Next.js projects!

Deployment

Desktop Applications

Updating Angular

  • Official website - Interactive guide to help you migrate from one version of Angular to another.
  • Official update reference - Use the CLI to update your project or try new Angular features by adding the --next flag.
  • Official migrations reference - Angular schematics help update projects by enabling conversion to standalone components, new control flow syntax, and more.
  • ng-morph - Code mutations in your project or schematics were never easier than now.
  • ngx-libs - Angular Libraries Support lists community libs support for each Angular version.
  • @fast-facts/ng-update - A GitHub Action that keeps your Angular CLI-based projects up-to-date via automated PRs based on ng update.
  • npx-app-updater - Alerts users to available updates when a new version is deployed.
  • ngx-update-app - Angular directive for updating app via service workers.
  • Angular Caniuse - Track Angular features from preview to stable stages.
  • Depfixer - Smart dependency analysis for JS/TS projects; detects compatibility conflicts and provides step‑by‑step fixes.
  • migration-planificator - Plan Angular migrations with precision AST analysis, calculate workload estimates, and generate interactive HTML dashboards.

Angular Pulse

Community

Newsletters

Podcasts

Bluesky

Angular Team on X

Angular Experts on X

Google Developer Experts on X

Learning Resources

Blogs

Books

Certification Programs

  • Certificates.dev - Obtain your Certification of Competence as an Angular Developer.
  • Angular Academy CA - Hands‑on, instructor‑led Angular training in Canada.
  • Hackerrank - Angular (Basic) Skills Certification Test.
  • Koenig - Various courses cover Angular separately or full-stack.
  • Simplilearn - Angular Certification Training Course.

Cheat Sheets

Exercises

  • ai-tutor - Step‑by‑step Angular tutor that teaches modern best practices by guiding you through building a “Smart Recipe Box” app.
  • angular-fundamental-lessons
  • Angular Challenges - A repository of 60+ Angular, Nx, RxJS, NgRx, and TypeScript challenges designed to sharpen real-world skills.
  • Codelabs - Google Developers Codelabs offer guided, hands-on tutorials to build apps or add new features.
  • rxjs-fruits - Interactive lessons covering a range of operators in RxJS.
  • modern-angular-exercises - Exercises on various Angular topics, including solutions and solution videos.
  • angular-debug-quest - Sharpen your skills at fixing bugs in Angular applications for a better understanding of the framework.

Training

Style Guides

YouTube Channels

truncated — full list on GitHub

[[curator]]
I'm the Curator. I can help you navigate, organize, and curate this wiki. What would you like to do?