Skip to content

ArchitectUI v3.1.0 - Angular 21

Latest

Choose a tag to compare

@puikinsh puikinsh released this 02 Dec 16:08
b8c721a

ArchitectUI - Angular 21 with Zoneless Architecture

Highlights

This major release upgrades ArchitectUI Angular to Angular 21 with full zoneless support, delivering significantly smaller bundle sizes and improved runtime performance.

Key Changes

  • Fully Zoneless - Removed zone.js dependency entirely
  • 98% Smaller Polyfills - Reduced from ~91KB to ~1.6KB
  • Angular Signals - Modern reactive state management
  • TypeScript 5.9 - Latest TypeScript features

What's New

Performance Improvements

  • Polyfills bundle: 91KB -> 1.6KB (98% reduction)
  • Faster startup: No zone.js patching overhead
  • Better change detection: Using Angular Signals for reactive UI

Framework Updates

Package Previous New
Angular 20.1.6 21.0.2
TypeScript 5.8.3 5.9.3
Bootstrap 5.3.7 5.3.8
ng-bootstrap 19.0.1 20.0.0-rc.0
Chart.js 4.5.0 4.5.1
ESLint 8.x 9.39.1
FontAwesome 6.x 7.x

Code Modernization

  • Replaced setTimeout() with afterNextRender() for DOM operations
  • Added Angular Signals for reactive component state
  • Updated test files for zoneless compatibility
  • Removed deprecated Protractor e2e configuration
  • Removed deprecated TSLint configuration

Breaking Changes

  1. Zone.js Removed - Applications are now fully zoneless
  2. afterNextRender() API - Components using setTimeout for DOM initialization now use afterNextRender()
  3. Angular Signals - Some component state now uses signal() for reactive updates

Installation

# Clone or download the release
git clone https://github.com/DashboardPack/architectui-angular-theme-free.git
cd architectui-angular-theme-free

# Install dependencies
npm install

# Start development server
ng serve

# Build for production
ng build --configuration production

Requirements

  • Node.js 18.19+ (20.x recommended)
  • npm 9+ or yarn
  • Angular CLI 21+

Migration from v3.0.0

If upgrading from the previous version:

  1. Update Node.js to 18.19+ if needed
  2. Delete node_modules and package-lock.json
  3. Run npm install
  4. If you have custom components using setTimeout for DOM init, migrate to afterNextRender()
  5. For reactive state that needs automatic UI updates, consider using Angular Signals

Demo

Live demo: https://demo.dashboardpack.com/architectui-angular-free/

Full Changelog

See CHANGELOG.md for complete details.

Support


Full Changelog: v3.0.0...v3.1.0