🚀 Angular 22 Upgrade

This release upgrades the starter from Angular 21 → Angular 22, bringing the latest framework features along with updated tooling across the board.

✨ Highlights

• Angular 22 — @angular/core, @angular/material, @angular/cdk and all Angular packages upgraded to v22.1.1
• Angular CLI 22.1.3 — latest build tooling with @angular/build
• TypeScript 6.0 — required by Angular 22 (~6.0.3)
• Zone.js 0.16 — latest stable runtime

📦 Dependency Upgrades

🔧 Configuration Changes

• Removed deprecated baseUrl from tsconfig.json (TypeScript 6.x deprecation)
• Replaced fullTemplateTypeCheck with strictTemplates in angularCompilerOptions

⚠️ Breaking Changes

• TypeScript 6.0 is now required — check your code for TS 6.x compatibility
• @wlucha/ng-country-select v5 — review the changelog for breaking API changes
• Compodoc v2 — may require config adjustments

Full Changelog: CHANGELOG.md

Summary

Major upgrade of the Angular Starter project from Angular 20 to Angular 21, along with a full modernization of the development tooling stack.

Angular 21 Migration

• Upgraded all @angular/* core packages, CLI, and Material to v21
• Bumped TypeScript to 5.9.3 (required by Angular 21)
• Updated @angular-eslint schematics and plugins to v21

Storybook v10

• Upgraded Storybook from v8 to v10.2.10
• Removed obsolete v8 addon packages (@storybook/addon-essentials, @storybook/blocks, etc.) that are no longer needed in v10
• Aligned @storybook/angular and eslint-plugin-storybook to v10

Cypress → Playwright Migration

• Removed Cypress and @cypress/schematic entirely
• Added @playwright/test with Chromium, Firefox, and WebKit browser support
• Created playwright.config.ts with auto-start of the Angular dev server
• Migrated E2E test to Playwright syntax (tests/app.spec.ts)
• npm run e2e now runs Playwright across all 3 browser engines ✅

DevDependencies Upgraded to Latest

• ESLint → v10 (with @eslint/js and @eslint/eslintrc as explicit deps)
• Jest → v30, jest-preset-angular → v16
• @commitlint → v20, @babel/core → v7.29, babel-loader → v10
• prettier → v3.8, @types/node → v25, @jsverse/transloco → v8
• tailwindcss & @tailwindcss/postcss → v4.2

Dependency Resolution

• Added .npmrc with legacy-peer-deps=true to handle ESLint v10 peer dependency conflicts with @angular-eslint (which hasn't updated its peer range yet)
• Added overrides in package.json for @typescript-eslint/* TypeScript version compatibility
• Added transformIgnorePatterns to Jest config for @jsverse ESM module support
• Updated husky prepare script from deprecated husky install to husky

Verification

• ✅ npm run build:prod — production build passes
• ✅ npm run test:ci — all unit tests pass
• ✅ npm run lint — linting passes (ESLint 10)
• ✅ npm run e2e — 3/3 Playwright E2E tests pass (Chromium, Firefox, WebKit)

✅ Latest Angular 20 – Stay up-to-date with the newest Angular features.
✅ Angular Material – Build beautiful, responsive UIs with Material Design.
✅ Unit Testing with Jest – Fast and reliable testing for your components.
✅ End-to-End Testing with Cypress – Ensure your app works flawlessly from start to finish.
✅ Internationalization with Transloco – Easily support multiple languages.
✅ Auto Documentation with Compodoc – Keep your codebase well-documented.
✅ Component Examples with Storybook – Showcase and test your components in isolation.
✅ Bundle Analysis with Source Map Explorer – Optimize your app's performance.
✅ Docker Support – Simplify deployment and containerization.
✅ Code Quality Tools – ESLint, Prettier, and Commit Linting for clean, consistent code.
✅ Security Audits with AuditJS – Keep your dependencies secure.
✅ Auto-Generated CHANGELOG – Track changes effortlessly with auto-changelog.
✅ Tailwind CSS Integration – Utilize a utility-first CSS framework to create sleek, responsive designs efficiently.

✅ Latest Angular 19 – Stay up-to-date with the newest Angular features.
✅ Angular Material – Build beautiful, responsive UIs with Material Design.
✅ Unit Testing with Jest – Fast and reliable testing for your components.
✅ End-to-End Testing with Cypress – Ensure your app works flawlessly from start to finish.
✅ Internationalization with Transloco – Easily support multiple languages.
✅ Auto Documentation with Compodoc – Keep your codebase well-documented.
✅ Component Examples with Storybook – Showcase and test your components in isolation.
✅ Bundle Analysis with Source Map Explorer – Optimize your app's performance.
✅ Docker Support – Simplify deployment and containerization.
✅ Code Quality Tools – ESLint, Prettier, and Commit Linting for clean, consistent code.
✅ Security Audits with AuditJS – Keep your dependencies secure.
✅ Auto-Generated CHANGELOG – Track changes effortlessly with auto-changelog.
✅ Tailwind CSS Integration – Utilize a utility-first CSS framework to create sleek, responsive designs efficiently.

✅ Angular 19
✅ Angular Material
✅ Unit Testing with Jest
✅ End-to-End Testing with Cypress
✅ Internationalization with Transloco
✅ Auto documentation with Compodoc
✅ Provide component examples with Storybook
✅ Analyse your project with source-map-explorer
✅ Docker
✅ ESLint
✅ Prettier
✅ Commit Linting
✅ AuditJS Audit this application using Sonatype OSS Index
✅ Auto-generate a CHANGELOG with auto-changelog

✅ Angular 18
✅ Angular Material
✅ Unit Testing with Jest
✅ End-to-End Testing with Cypress
✅ Internationalization with Transloco
✅ Auto documentation with Compodoc
✅ Provide component examples with Storybook
✅ Analyse your project with source-map-explorer
✅ Docker
✅ ESLint
✅ Prettier
✅ Commit Linting
✅ AuditJS Audit this application using Sonatype OSS Index
✅ Auto-generate a CHANGELOG with auto-changelog

✅ Angular 17
✅ Angular Material
✅ Unit Testing with Jest
✅ End-to-End Testing with Cypress
✅ Internationalization with Transloco
✅ Auto documentation with Compodoc
✅ Provide component examples with Storybook
✅ Analyse your project with source-map-explorer
✅ Docker
✅ ESLint
✅ Prettier
✅ Commit Linting
✅ AuditJS Audit this application using Sonatype OSS Index
✅ Auto-generate a CHANGELOG with auto-changelog

✅ Angular 17
✅ Angular Material
✅ Unit Testing with Jest
✅ End-to-End Testing with TestCafé
✅ Internationalization with Transloco
✅ Auto documentation with Compodoc
✅ Provide component examples with Storybook
✅ Analyse your project with source-map-explorer
✅ Docker
✅ ESLint
✅ Prettier
✅ Commit Linting
✅ AuditJS Audit this application using Sonatype OSS Index
✅ Auto-generate a CHANGELOG with auto-changelog

✅ Angular 13
✅ Angular Material
✅ Unit Testing with Jest
✅ End-to-End Testing with TestCafé
✅ Internationalization with Transloco
✅ Auto documentation with Compodoc
✅ Analyse your project with webpack-bundle-analyzer
✅ Docker
✅ ESLint
✅ Prettier
✅ Commit Linting
✅ AuditJS Audit this application using Sonatype OSS Index

Features

✅ Angular 12
✅ Angular Material
✅ Jest Unit Testing
✅ Internationalization with Transloco
✅ Auto documentation with Compodoc
✅ Analyse your project with webpack-bundle-analyzer
✅ Docker
✅ ESLint
✅ Prettier
✅ Commit Linting