eaf-angular

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 type
• ngClass / 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

• EAF Repository
• ASP.NET Boilerplate Docs
• PrimeNG 17 Docs
• Bootstrap 5 Docs
• Angular PWA Guide