ArchitectUI v3.1.0 - Angular 21

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

• Issues: https://github.com/DashboardPack/architectui-angular-theme-free/issues
• Website: https://dashboardpack.com

---

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

ArchitectUI Angular Free v3.0.0

🎉 What's New in v3.0.0

We're excited to announce a major update to ArchitectUI Angular Free! This release focuses on enhanced user experience, production-ready deployment, and polished UI components.

✨ Enhanced Header Experience

• Beautiful Dropdown System: Redesigned notifications, messages, and user settings dropdowns with clean, intuitive interfaces
• Smart Notification Center: Unread counters, color-coded alerts, and timestamps for better user engagement
• Message Preview System: Quick message previews with user avatars and online status indicators
• Streamlined User Settings: Enhanced profile dropdown with organized account management options

🎯 Improved Sidebar Navigation

• Smart Logo System: Text-based logo showing "A" when collapsed and full "ArchitectUI" when expanded - no more tiny, invisible logos!
• Fixed Chevron Directions: Proper arrow directions (→ when closed, ↓ when open) with smooth CSS animations
• Enhanced Hover States: Better visual feedback for navigation interactions
• Responsive Animations: Fluid transitions between collapsed and expanded states

🚀 Production-Ready Deployment

• Subdirectory Support: Built-in support for deploying to paths like /architectui-angular-free/
• Multi-Server Configurations: Ready-to-use configs for Apache, Nginx, IIS, and Node.js
• Cloudways Integration: Dedicated deployment guide with optimized configurations
• Direct URL Access: Fixed Angular routing for direct page access and browser refresh
• Custom Build Command: npm run build:prod with automatic base href configuration

🔧 Technical Improvements

• Bootstrap 5 Complete: Removed all remaining Bootstrap 4 traces and deprecated classes
• Form Components Updated: All form controls now use proper Bootstrap 5 syntax
• Asset Loading Fixed: Resolved CSS/JS loading issues in subdirectory deployments
• Spacing Classes: Fixed deprecated spacing utilities (ml-/mr- to ms-/me-)

📚 Enhanced Documentation

• Comprehensive Deployment Guides: Step-by-step instructions for major hosting providers
• Server Configuration Files: Production-ready .htaccess, web.config, and nginx configurations
• Troubleshooting Guides: Detailed solutions for common deployment issues
• Cloudways-Specific Guide: Complete deployment instructions for Cloudways hosting

🔄 Migration from v2.x

This is a seamless update! Simply run:

npm install
npm run build:prod  # For subdirectory deployment

No breaking changes - all existing functionality preserved while adding new features.

🎯 Perfect For

• SaaS Applications: Enhanced dropdowns perfect for user management interfaces
• Admin Dashboards: Professional UI components for internal tools
• Client Portals: Beautiful notification and messaging systems
• Production Deployment: Multiple hosting options with complete configuration guides

📊 What's Included

• Modern Angular 20.1.4 with Bootstrap 5.3.7
• Interactive charts powered by Chart.js v4
• NgRx state management
• Complete responsive layout system
• Enhanced header dropdowns with real-world functionality
• Smart sidebar navigation with proper visual feedback
• Production-ready deployment configurations
• Comprehensive documentation and guides

🌟 Live Demo

Experience the new features: Live Demo

📝 Full Changelog

See CHANGELOG.md for detailed technical changes.

---

Ready to upgrade your Angular dashboard? This update brings professional-grade UI enhancements and production-ready deployment - perfect for taking your project to the next level! 🚀

Bootstrap 5 Release

Merge pull request #19 from DashboardPack/Bootstrap-5-update

Migrating to bootstrap v5