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()withafterNextRender()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
- Zone.js Removed - Applications are now fully zoneless
- afterNextRender() API - Components using
setTimeoutfor DOM initialization now useafterNextRender() - 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 productionRequirements
- 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:
- Update Node.js to 18.19+ if needed
- Delete
node_modulesandpackage-lock.json - Run
npm install - If you have custom components using
setTimeoutfor DOM init, migrate toafterNextRender() - 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
- Issues: https://github.com/DashboardPack/architectui-angular-theme-free/issues
- Website: https://dashboardpack.com
Full Changelog: v3.0.0...v3.1.0