DEV Community

Wakeup Flower
Wakeup Flower

Posted on

Angular useful packages

Core Angular Dependencies (Installed by Default)

@angular/core
@angular/common
@angular/compiler
@angular/platform-browser
@angular/platform-browser-dynamic
@angular/router
rxjs
zone.js

Essential UI & Component Libraries

@angular/material # Comprehensive UI component library (requires separate component installs)
@angular/cdk # Component Dev Kit for building UI features
@angular/animations # For animations

State Management

@ngrx/store # Reactive state management
@ngrx/effects # Side effects for @ngrx/store
@ngrx/router-store # Router integration for @ngrx/store
@ngrx/entity # Entity state management for @ngrx/store
@ngrx/store-devtools # DevTools for @ngrx/store (Development Dependency)

@ngxs/store # Another popular state management library
@ngxs/devtools-plugin # DevTools for @ngxs/store (Development Dependency)
@ngxs/logger-plugin # Logger plugin for @ngxs/store (Development Dependency)

Forms

@angular/forms # For template-driven and reactive forms

HTTP Communication

@angular/common/http

Routing

@angular/router

Testing (Development Dependencies)

@angular/core/testing
@angular/common/http/testing
@angular/router/testing
jasmine-core
karma
karma-chrome-launcher
karma-coverage
karma-jasmine
karma-jasmine-html-reporter
protractor # End-to-end testing (Legacy, consider Cypress or Playwright)
cypress # Modern end-to-end testing (Development Dependency)
@cypress/schematic # Cypress schematics for Angular (Development Dependency)
playwright # Another modern end-to-end testing framework (Development Dependency)
@playwright/test # Playwright test runner (Development Dependency)
karma-cli # Karma CLI (Development Dependency)
ts-node # TypeScript execution for testing (Development Dependency)

Build & Development Tools (Development Dependencies)

@angular/cli
typescript
tslib
codelyzer # Static code analysis (Legacy, consider ESLint)
@angular-devkit/build-angular
@angular-devkit/core
@angular-devkit/schematics
@angular-eslint/schematics # Angular ESLint schematics
@angular-eslint/eslint-plugin # Angular ESLint plugin
@angular-eslint/eslint-plugin-template # Angular ESLint template plugin
eslint # JavaScript/TypeScript linter
@typescript-eslint/eslint-plugin # TypeScript ESLint plugin
@typescript-eslint/parser # TypeScript ESLint parser
prettier # Code formatter
eslint-config-prettier # Disables ESLint rules that might conflict with Prettier
eslint-plugin-prettier # Runs Prettier as an ESLint rule
husky # Git hooks
lint-staged # Run linters on staged files
concurrently # Run multiple commands concurrently (Development Dependency)
npm-run-all # Run multiple npm scripts sequentially or in parallel (Development Dependency)

UI Libraries (Beyond Material)

ngx-bootstrap # Bootstrap components for Angular
primeng # Rich set of UI components
ng-zorro-antd # Ant Design components for Angular

Icons

@fortawesome/angular-fontawesome # Font Awesome integration
@fortawesome/free-solid-svg-icons # Free Solid style icons (or other styles)

Maps

@angular/google-maps # Google Maps integration

Charts

ng2-charts # Charts.js integration
chart.js

Internationalization (i18n)

@angular/localize

Other Useful Libraries

ng-packagr # For building Angular libraries (Development Dependency)
date-fns # Modern JavaScript date utility library
lodash # Utility library
ngx-translate # Internationalization library

Service Workers & PWA

@angular/service-worker

Server-Side Rendering (SSR) & Universal

@angular/platform-server
@nguniversal/express-engine # For Express.js
@nguniversal/common

Testing Utilities

@testing-library/angular # User-centric testing
@testing-library/jest-dom # Jest matchers for DOM testing

Code Generation

schematics-cli # For creating custom Angular Schematics (Development Dependency)

Top comments (0)