Angular (Web)

Nx monorepo with 26 publishable SDK libraries, ~65 custom UI components, NgRx ComponentStore state management, and a CSS design token system — giving you a complete Angular web application foundation.

What It Does

The Angular platform spans two repositories:

• sdks-angular — The Foundation layer. An Nx-managed monorepo of 26 publishable libraries providing auth, RBAC, theming, messaging, notifications, files, search, commerce, and more.
• Your product app — An Angular CLI workspace consuming Foundation SDKs. Product apps are built on top of the Foundation layer and compose its packages into domain-specific experiences.

Foundation libraries are published as @engineering11/*-web npm packages to GitHub Packages. Product apps consume them via npm install.

Key Capabilities

How It Fits Together

┌──────────────────────────────────────────────┐
│  sdks-angular (Foundation Layer)              │
│  Published as @engineering11/*-web to         │
│  GitHub Packages (npm.pkg.github.com)         │
│                                               │
│  26 SDK libraries: auth, access, config,      │
│  files, messaging, notifications, search,     │
│  commerce, community, social, and more        │
├──────────────────────────────────────────────┤
│                  npm install                   │
├──────────────────────────────────────────────┤
│  Your Product App (Product Layer)              │
│  Consumes @engineering11/* packages            │
│                                               │
│  Apps: your domain-specific applications      │
│  Shared: shared-lib (domain components,       │
│          error mappings, product services)     │
└──────────────────────────────────────────────┘

Architecture

Module Structure

Feature modules follow a consistent pattern with lazy-loaded routes:

modules/jobs/
├── jobs.module.ts
├── jobs-routing.module.ts
├── views/          # Routed page components
├── components/     # Reusable feature components
├── services/       # Feature-level services
└── stores/         # ComponentStore files

The codebase is primarily NgModule-based with ~60 standalone components in newer features. Migration to standalone is underway.

SDK Configuration

Every SDK uses the same forRoot() pattern — abstract base config, concrete provider, module import:

// SDK defines the contract
export abstract class BaseAuthConfigProvider {
  abstract get config(): IAuthConfig
}
 
// Your product app provides its implementation
export class AuthConfigProvider extends BaseAuthConfigProvider {
  get config(): IAuthConfig {
    return {
      authBaseURL: environment.services.auth,
      tenantId: this.appConfig.config.auth.tenantId,
    }
  }
}
 
// Wired via forRoot()
AuthModule.forRoot({ configProvider: AuthConfigProvider })

Routing

All feature modules are lazy-loaded with multi-layered guards:

1. Auth guards (@engineering11/auth-web) — superGuard, loggedInOnlyGuard
2. Permission guards (@engineering11/access-web) — PermissionsGuard with route data
3. Feature guards (@engineering11/config-web) — FeatureGuard checks feature flags
4. Domain guards (product-level) — data pre-loading and role checks

What You Don’t Have to Build

• 26 publishable SDK libraries covering auth, RBAC, theming, config, files, messaging, notifications, search, commerce, community, social, maps, multimedia, payment, analytics, content, events, registration, user management, and tenant bootstrap
• ~65 UI components (forms, layout, feedback, data display, media, loaders, rich text, overlays)
• CSS design token system with runtime white-label theming
• Firebase Auth integration with multi-tenant support, guards, and session timeout
• Product × role permission system backed by Firestore
• NgRx ComponentStore for every SDK domain
• Cross-repo dependency cascade (SDK publish → auto-update product apps)
• Cloud Build CI/CD to Firebase Hosting with preview deployments
• Conventional commit enforcement with AI PR review
• Rollbar error monitoring with structured error handler classes
• Nx remote caching on GCP for fast CI builds

What You Build

• Product-specific features, views, and business logic
• Config providers for each SDK (BaseXxxConfigProvider implementations)
• Route definitions and guard configuration
• Product-specific error type constants and handler mappings
• Domain components for product-specific UI
• Environment files (Firebase configs, API URLs, third-party keys)
• NgRx store logic for product-level state

Next Steps

• React Web — The React web platform
• Platforms Overview — Compare all frontend platforms
• Architecture — Cross-platform architecture patterns
• Capabilities — Authentication, theming, error handling, state, and more