Angular 20 Enterprise Reference Architecture — a blueprint for HRMS, CRM, ERP, and SaaS applications.
# Install dependencies
npm install --legacy-peer-deps
# Generate mock data (1000+ records)
npm run mock:generate
# Terminal 1 — Mock API (port 3000)
npm run mock:api
# Terminal 2 — Angular app (port 4200)
npm startLogin: admin / password123
src/app/
├── core/ # Singleton services, auth, guards, interceptors, state
├── shared/ # Reusable UI, directives, pipes, layouts
└── features/ # Lazy-loaded domain modules
├── auth/
├── dashboard/
├── employee/
├── department/
├── attendance/
├── project/
├── task/
├── reports/
├── notifications/
├── settings/
├── audit-logs/
├── workflow/
└── analytics/
| Category | Implementation |
|---|---|
| Standalone | All components, pipes, directives, guards, interceptors |
| Signals | signal(), computed(), effect(), linkedSignal(), resource() |
| Control Flow | @if, @else, @switch, @for, @empty, @defer |
| Functional APIs | inject(), functional guards & interceptors |
| Routing | Lazy loading, child routes, role guards, preloading |
| State | Signal store, NgRx Store/Effects/Entity |
| HTTP | Interceptors (auth, error, cache, retry), withFetch() for SSR |
| Material + CDK | Sidenav, Table, Form fields, Virtual scroll patterns |
| i18n | English, Hindi, Marathi (signal-based service) |
| Theme | Light/Dark/Custom via signals |
| Security | CSP headers, JWT, RBAC, ABAC, secure storage |
| SSR | Enabled via @angular/ssr |
| Mock API | JSON Server with 3174+ records |
| Approach | Location | Best For |
|---|---|---|
| Signal Store | core/state/employee-signal.store.ts |
Local/feature state, simple async |
| NgRx Entity | core/state/ngrx/ |
Complex shared state, time-travel debugging |
| Component Store | Extend per feature | Isolated feature state machines |
| Auth Signals | core/state/auth-state.service.ts |
Global session state |
| Collection | Records |
|---|---|
| employees | 500 |
| attendance | 1000 |
| tasks | 500 |
| auditLogs | 500 |
| notifications | 300 |
| projects | 100 |
| users | 50 |
| departments | 20 |
| Command | Description |
|---|---|
npm start |
Dev server |
npm run mock:api |
JSON Server on :3000 |
npm run mock:generate |
Regenerate db.json |
npm run build |
Production build |
npm test |
Unit tests (Karma/Jasmine) |
npm run serve:ssr:ewmp |
SSR server |
- New feature: Add folder under
features/, create*.routes.ts, register inapp.routes.ts - New permission: Add to
core/enums/user-role.enum.tsand mockrolesin db.json - New interceptor: Create in
core/interceptors/, add toapp.config.ts - New shared component: Add under
shared/components/, export via barrel if needed
See docs/ARCHITECTURE.md for detailed patterns, trade-offs, and interview questions.
- Node.js ^20.19.0 or ^22.12.0 (recommended)
- npm 8+
MIT — Use freely as an enterprise Angular reference blueprint.