ArchitectUI Angular - Free Admin Dashboard Template

A modern, responsive admin dashboard template built with Angular 22, Bootstrap 5, and Chart.js

ArchitectUI Angular is a professional admin dashboard template perfect for building modern web applications, SaaS platforms, and administrative interfaces. This free version provides a solid foundation with essential components and features to get your project started quickly.

Features

• Angular 22 Zoneless - Built with the latest Angular framework, fully zoneless for maximum performance
• Bootstrap 5.3.8 - Loaded directly from npm with theme variable overrides; no vendored copy to maintain
• Font Awesome 7 - Latest icon set via @fortawesome/fontawesome-free@7, no v4 compatibility shim
• Interactive Charts - Powered by Chart.js v4 with ng2-charts v10
• NgRx State Management - Centralized, type-safe state management for theme configuration
• Angular Signals everywhere - Shared UI state and viewChild() queries use signals for true zoneless reactivity
• TypeScript 6.0 - Type-safe development experience
• Vite + esbuild build - Fast dev server and builds via @angular/build; zero webpack in the dependency tree
• ESLint 10 (flat config) - Modern code linting via eslint.config.js with angular-eslint
• Mobile Responsive - Optimized for all device sizes
• 98% Smaller Polyfills - Reduced from 91KB to 1.6KB by removing zone.js
• Clean security audit - npm audit reports 0 vulnerabilities

What's Included

• Dashboard Analytics - Interactive dashboard with charts and widgets
• UI Elements - Buttons, cards, dropdowns, icons, timeline, and more
• Components - Tabs, accordions, modals, pagination, progress bars, tooltips
• Form Elements - Complete form controls and layouts
• Data Tables - Responsive table components
• Charts - Line, bar, pie, doughnut, radar, polar area, and more chart types
• User Pages - Login, register, and password recovery pages
• Responsive Layout - Header, sidebar, footer layout system
• In-App Documentation - Lazy-loaded /docs section covering setup, structure, theming, state, components, charts, and tooling

Live Demo

Check out the live demo: ArchitectUI Angular Free Demo

Preview

Quick Start

Prerequisites

• Node.js ^20.19.0, ^22.12.0, or >=24 (22.x LTS recommended; see .nvmrc)
• npm or yarn
• Angular CLI 21+

Installation

1. Clone the repository:

git clone https://github.com/your-username/architectui-angular-free.git
cd architectui-angular-free

2. Install dependencies:

npm install

3. Start the development server:

ng serve

4. Open your browser and navigate to http://localhost:4200

Build for Production

ng build --configuration production

The build artifacts will be stored in the dist/ directory.

Development Commands

Command	Description
ng serve	Start development server at http://localhost:4200
ng build	Build the project for production
npm run build:prod	Build for subdirectory deployment with correct base href
ng test	Run unit tests via Karma
ng lint	Run ESLint code analysis
ng generate component <name>	Generate a new component

Production Deployment

For Subdirectory Deployment

When deploying to a subdirectory like https://demo.dashboardpack.com/architectui-angular-free/:

npm run build:prod

This command:

• Builds with production optimizations
• Sets base href to /architectui-angular-free/
• Outputs to dist/architectui-angular-free/

Then upload the contents of dist/architectui-angular-free/ to your server's subdirectory.

For Root Domain Deployment

When deploying to a root domain like https://yourdomain.com/:

ng build --configuration production

Server Configuration

Apache (.htaccess)

An .htaccess file is included in the project root. Copy it to your deployment folder along with the built files.

Nginx

Add this to your server configuration:

location /architectui-angular-free/ {
    try_files $uri $uri/ /architectui-angular-free/index.html;
}

Important Deployment Notes

1. After building with npm run build:prod:

   • Upload all contents from dist/architectui-angular-free/browser/
   • The .htaccess file is automatically included in the build
   • Verify the base href in index.html is /architectui-angular-free/

2. File Structure on Server:

   /architectui-angular-free/
   ├── index.html (with correct base href)
   ├── favicon.ico
   ├── .htaccess (handles direct URL access)
   ├── main-*.js
   ├── polyfills-*.js
   ├── scripts-*.js
   ├── styles-*.css
   ├── assets/
   └── media/
   

3. Direct URL Access Fix: The .htaccess file ensures that direct links like /architectui-angular-free/dashboards/analytics work correctly by redirecting all routes to index.html, allowing Angular to handle the routing.

Project Structure

src/
├── app/
│   ├── DemoPages/           # Main application pages
│   │   ├── Dashboards/      # Dashboard components
│   │   ├── Elements/        # UI elements
│   │   ├── Components/      # Interactive components
│   │   ├── Forms/          # Form components
│   │   ├── Tables/         # Table components
│   │   ├── Charts/         # Chart components
│   │   └── UserPages/      # Authentication pages
│   ├── Layout/             # Layout components (header, sidebar, footer)
│   ├── ThemeOptions/       # Theme configuration and state management
│   └── shared/             # Shared modules and components
├── assets/                 # Static assets (images, styles, etc.)
└── environments/          # Environment configurations

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Resources & Related Templates

More Admin Dashboards

Explore more premium admin dashboard templates at Colorlib:

• Angular Admin Templates - Collection of the best Angular admin dashboards
• Bootstrap Admin Templates - Premium Bootstrap-based admin templates
• Free Admin Templates - High-quality free admin dashboard templates

Professional Versions

• ArchitectUI Angular Pro - Get the Pro Version - Premium version with advanced components, more pages, and premium support
• React Version - ArchitectUI React
• Vue Version - ArchitectUI Vue
• HTML/jQuery Version - ArchitectUI HTML

DashboardPack

Visit DashboardPack.com for more premium admin dashboard templates and themes for various frameworks and technologies.

Changelog

See CHANGELOG.md for the full change history.

The current release (3.4.0) brings:

• Angular 22 + TypeScript 6. Upgraded the framework from Angular 21 to 22.0.0 and TypeScript from 5.9 to 6.0, via the ng update 21 → 22 migrations
• npm audit is clean (0 vulnerabilities); every dependency at its latest compatible release
• @fortawesome/angular-fontawesome 4 → 5, angular-eslint 21 → 22
• Compatibility note: @ng-bootstrap and @ngrx haven't shipped Angular 22 builds yet — they're verified working on Angular 22 and installed via legacy-peer-deps (see .npmrc); they'll be bumped once 22-compatible releases land

The previous release (3.3.0) migrated the build system from webpack to Vite (@angular/build) and ESLint 9 → 10 (flat config).

Previous release (3.2.0): Font Awesome 4 → 7, vendored Bootstrap SCSS removed in favor of npm Bootstrap 5.3.8, and Angular signals adopted across shared UI state.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

For questions and support:

• Check the issues page for common problems and solutions
• Visit DashboardPack for premium support options
• Browse Colorlib's admin templates for more resources

---

Made with care by the DashboardPack team. Built on the foundation of Angular, Bootstrap, and modern web technologies.