@multisystemsuite/angular-mf-platform

TypeScript CLI that scaffolds production-grade enterprise Angular microfrontend platforms using Angular 14–21, Native Federation (or Webpack MF for 14–15), Angular Material, Angular Router, Docker, and npm workspaces.

Angular counterpart to @multisystemsuite/angular-mf-platform — same enterprise pillars, monorepo layout, audit scripts, and platform CLI patterns, optimized for Angular MFEs.

Install & run

npx @multisystemsuite/angular-mf-platform@latest my-platform \
  --type=parent \
  --children=billing,orders \
  --shared=corelib \
  --angular=19

# short binary name (same package)
npx create-angular-mf-app my-platform --type=parent --children=billing,orders --shared=corelib

Contributors — test unreleased changes locally:

npm run build
node dist/index.js my-platform --type=parent --children=billing,orders --shared=corelib --angular=19 -y

What it generates

Single remote (--type=child)

• Angular app + Native Federation remote
• Standalone components + Angular Material
• Optional Docker
• Dev on --port (default 4201)

Parent monorepo (--type=parent)

| Path | Purpose | |------|---------| | apps/shell | Host (layout, federation runtime, monitoring, core) | | apps/<child> | Federated remotes — features/, remote-entry/, pages | | apps/corelib | Shared federated library (HostShell, RBAC hooks, design tokens) | | libs/* | shared-ui, shared-material, shared-auth, federation-runtime, … | | tools/ | generators, federation-cli, diagnostics | | governance/ | module boundaries, ownership, architecture rules | | runtime-config/ | Remote manifest, observability, scaling, resilience configs | | deployment/, docker/, kubernetes/ | Deploy scaffolding | | docs/ + scripts/ | 10 enterprise architect pillars + audit scripts | | .github/workflows/ | CI pipeline |

Quick start

Parent monorepo:

npx create-angular-mf-app my-platform \
  --type=parent \
  --children=billing,orders,analytics \
  --shared=corelib \
  --angular=19

cd my-platform
npm install
npm run local

Open http://localhost:4200 — remotes load on /billing, /orders, etc.

Add a remote to an existing parent workspace:

cd my-platform
npx create-angular-mf-app add-child
# interactive prompts: workspace folder, module name, port, docker

npx create-angular-mf-app add-child inventory --port=4204
# or from repo root during CLI development:
node dist/index.js add-child --cwd=./my-platform
node dist/index.js add-child inventory --cwd=./my-platform --port=4204 -y

This scaffolds apps/inventory, wires shell federation/routes/sidebar, and updates angular.json, mf.json, and npm scripts.

Single remote:

npx create-angular-mf-app inventory --type=child --port=4201 --angular=19
cd inventory && npm install && npm start

CLI reference

npx create-angular-mf-app <project-name> [options]

| Option | Description | |--------|-------------| | --type=parent\|child | Monorepo or single app (default: child) | | --children=billing,orders | Child remotes (required in parent mode) | | --shared=corelib | Shared federated lib (default: corelib) | | --angular=19 | Angular major: 14, 15, 16, 17, 18, 19, 20, 21 | | --port=4201 | Dev port (child mode) | | add-child <name> | Add remote to existing parent (use with --cwd, --port) | | --cwd=./my-platform | Parent workspace for add-child (default: current directory) | | --docker=true\|false | Dockerfiles (default: true) | | --federation=true\|false | Federation (default: true) | | --control-plane | Workflow Designer & Monitoring preset | | --federation-os | Full Enterprise Federation OS preset | | --auth, --charts, --monitoring, … | Enterprise module flags | | -y, --yes | Non-interactive | | -h, --help | Help |

Parent rules: shell is always the host — never pass it in --children or --shared.

Angular version matrix

| Angular | Federation stack | Builder | |---------|-------------------|---------| | 14–15 | @angular-architects/module-federation (Webpack) | browser | | 16.1+ | @angular-architects/native-federation | application (esbuild) | | 17–21 | Native Federation (version-matched) | application |

Default scaffold target: Angular 19.

Generated scripts

| Command | When to use | |---------|-------------| | npm run local | All apps — shell + every child + corelib | | npm run billing | Focused dev — shell + corelib + billing | | npm run build | Production build all apps | | npm run architect-level:audit | Capstone enterprise audit | | npm run mf:doctor | Workspace health | | npm run federation:verify | Remote manifest check |

Ports assign sequentially from 4200 (shell → first child → … → corelib).

Enterprise architect pillars

Every federated parent workspace includes docs + audit scripts:

| Pillar | Audit | |--------|-------| | Architect capstone | npm run architect-level:audit | | Folder structure | npm run folder-structure:audit | | Angular architecture | npm run angular:architecture-audit | | Security | npm run security:hardening-audit | | Developer experience | npm run dx:audit | | Observability | npm run observability:audit | | Accessibility | npm run a11y:audit | | CI/CD | npm run cicd:audit | | Scalability | npm run scalability:audit | | Failure recovery | npm run failure-recovery:audit |

Module Federation (Angular)

┌─────────────────────────────────────────────┐
│  apps/shell (host) :4200                    │
│  ├── layout/shell-layout (local sidebar)    │
│  └── loadRemoteModule → child remotes       │
└─────────────────────────────────────────────┘
         │
         ▼
┌──────────────────┐   ┌─────────────────────┐
│  apps/corelib    │◀──│  apps/<child>       │
│  Material shell  │   │  RemoteAppShell     │
└──────────────────┘   └─────────────────────┘

Shared Angular packages (@angular/core, @angular/router, @angular/material, rxjs) are federation singletons.

Node version

• Angular 19–21: Node ≥ 20.19 (recommended: Node 22)
• Angular 17–18: Node ≥ 18.19
• Angular 14–16: see Angular version matrix

Develop & publish this package

git clone https://github.com/your-org/angular-mf-platform
cd angular-mf-platform
npm install
npm run build
node dist/index.js test-platform --type=parent --children=admin,billing --shared=corelib --angular=19 -y
npm publish --access public

Package: @multisystemsuite/angular-mf-platform · Binary: create-angular-mf-app

Parity with angular-mf-platform (React)

| Feature | React angular-mf-platform | Angular angular-mf-platform | |---------|--------------------|-----------------------------| | Parent monorepo | ✅ | ✅ | | Per-module dev scripts | ✅ | ✅ | | Enterprise pillar audits | ✅ | ✅ | | Control plane preset | ✅ full | ✅ scaffold + roadmap | | Federation OS preset | ✅ full | ✅ scaffold + roadmap | | MF CLI generators | ✅ full | 🚧 doctor + roadmap | | Infrastructure/nginx/k8s | ✅ full | 🚧 folder stubs | | Smart build + live reload | ✅ | ✅ smart-build.js | | Auth/charts/i18n flags | ✅ full modules | 🚧 flags + corelib stubs |

Roadmap items marked 🚧 ship scaffold structure; extend generators in follow-up releases.

Summary

| Layer | Command | |-------|---------| | Scaffold | npx create-angular-mf-app <name> --type=parent --children=… --angular=19 | | Daily dev | npm run local or npm run <module> | | Shared UI | Import from corelib federation exposes | | Audits | npm run architect-level:audit | | Publish CLI | npm run build && npm publish --access public |