🏗️ Architecture: How should Angular Elements be compiled and bundled for use ...

Date: 2026-03-25
Time: 18:39:05 UTC
Session: gspace1-271.2
Agent: angular
Confidence: 92%
Status: ✅ Documented

📋 Decision Context

Question:

How should Angular Elements be compiled and bundled for use alongside Platform Elements (Lit)?

Task: Not specified

🎯 Decision Made

Chosen:

esbuild bundle with @angular/* externalized via import maps, self-hosted Angular runtime from /angular-runtime/, lazy-loaded only when pe-* elements detected in DOM

Options Considered:

1. ngc + esbuild (full AOT compilation at build time)
2. esbuild with externals + JIT at runtime (chosen)
3. Bundle Angular runtime INTO pe-angular-widgets.js (standalone, heavier)

💭 Reasoning

Angular components use @Component decorators processed by JIT at runtime. Since the self-hosted Angular runtime (S264) already includes the JIT compiler, we can compile TypeScript with esbuild (preserving decorator metadata) and externalize all @angular/* packages. The browser resolves them via import maps to the singleton /angular-runtime/ bundles. This avoids: (1) duplicate Angular runtimes, (2) complex ngc build pipeline, (3) loading Angular on pages that don't use pe-* elements. Result: 11.9KB widget bundle + lazy loading = near-zero overhead for pure Lit pages.

📁 Files Involved

• tools/scripts/build/bundle-platform-elements-angular.ts
• libs/libs-structural/platform-elements-angular/src/lib/register-all.ts
• tools/scripts/build/bundle-angular-runtime.ts
• libs/libs-structural/platform-preview/src/lib/config/esm-cdn-map.ts
• libs/libs-structural/platform-elements/src/lib/runtime/angular-loader.ts

🔗 Related

• Decision ID: dev_1774463945768_xjn1qqh
• Session: 271
• Workspace: gspace1

Auto-generated by MCP Smart Consolidation