| name | eaf-angular |
| license | UNLICENSED |
| description | Expert guidance for the Angular UI template of EAF (Enterprise Application Foundation) based on ASP.NET Boilerplate. Covers the current stack, planned UI modernizations, responsive/mobile roadmap, PrimeNG and ngx-bootstrap coexistence, SignalR, PWA, and how to use the .specs migration plans in the EAF repository. |
EAF Angular UI
Use this skill when working on the Angular frontend of the afonsoft/EAF project.
Project Context
EAF is an open-source middleware platform extending ASP.NET Boilerplate (ABP) for .NET 10. The Angular UI template lives in:
Templates/Angular/Eaf.ProjectName.UI/
Current Technology Stack
- Angular: 20 (packages use
^20.x)
- TypeScript: 5.8
- Node.js: 20.20.0 (use
nvm use 20)
- UI Library: PrimeNG 17.17.0
- Legacy UI:
ngx-bootstrap 12, Metronic theme bundles (legacy Metronic 5/6 style)
- Real-time:
@microsoft/signalr ^7.0.14
- Charts: Chart.js
- PWA:
@angular/pwa and @angular/service-worker present but not fully configured
- Build: Angular CLI
Architecture Notes
- The template is currently desktop-first and relies on Metronic legacy CSS bundles (
m-grid--desktop, m-stack--desktop, m-header--skin-*).
- Custom
@media queries are rare; most responsiveness comes from the Metronic bundle.
- Theme skins are controlled by
currentTheme.baseSettings.header.headerSkin (dark, light, color) and menu.asideSkin.
service-proxies.ts is NSwag-generated — do not edit manually.
Common Tasks
Run the Application
cd Templates/Angular/Eaf.ProjectName.UI
nvm use 20
npm install --legacy-peer-deps
npx ng serve --host localhost --port 8000
Build and Test
npx tsc -p src/tsconfig.app.json --noEmit
npx ng build --configuration=production
npx ng test --no-watch --browsers=ChromeHeadlessNoSandbox
Lint
npx eslint src/app/shared/layout/chat/chat-bar.component.ts src/app/shared/layout/chat/chat-bar.component.html
UI Patterns
Theme-aware Classes
Use currentTheme.baseSettings.header.headerSkin to apply consistent header/sidebar skins:
<header class="header-{{ currentTheme.baseSettings.header.headerSkin }}">
Prefer CSS custom properties for theming:
:root {
--header-dark-bg: #37322d;
--header-light-bg: #efefef;
--header-color-bg: #ff7020;
}
.header-dark { background-color: var(--header-dark-bg); }
.header-light { background-color: var(--header-light-bg); }
.header-color { background-color: var(--header-color-bg); }
Avoid in New Code
- Legacy Metronic classes:
m-stack, m-grid__item, m-header--skin-*
- jQuery DOM manipulation
ngx-bootstrap for new components (migrate to PrimeNG)any typengClass / ngStyle (use class / style bindings or signals)
Prefer in New Code
- Bootstrap 5 utilities and CSS Grid/Flexbox
- PrimeNG native components
- Angular signals and OnPush change detection
- CSS custom properties for colors and spacing
- Mobile-first
@media queries
Migration Roadmap
The EAF repository contains detailed specs in .specs/:
| Spec | Focus |
|---|
.specs/eaf-angular-mobile-responsive-layout.spec.md | Mobile-first layout, off-canvas menus, touch targets |
.specs/eaf-angular-metronic8-bootstrap5-migration.spec.md | Migrate to Metronic 8 + Bootstrap 5 |
.specs/eaf-angular-modern-primeng-components.spec.md | Standardize on PrimeNG, remove ngx-bootstrap |
.specs/eaf-angular-dark-mode-theming.spec.md | Dark mode and CSS design tokens |
.specs/eaf-angular-pwa-offline.spec.md | Service Worker, manifest, offline queue |
.specs/eaf-angular-accessibility-a11y.spec.md | WCAG AA, keyboard navigation, ARIA |
.specs/eaf-aspnetzero-feature-adoption.spec.md | Adopt enterprise features from ASP.NET Zero |
.specs/eaf-abp-feature-parity.spec.md | Add missing ABP modules to EAF |
.specs/eaf-backend-modularization.spec.md | Backend modules (Blob, Redis, MailKit, SignalR, OpenIddict) |
References
