Integrated Library Systems
React Web Components in Angular
Cross-framework component bridge for enterprise ILMS
Frontend architect — React inside Angular without a rewrite · 14 months · university library consortium
Challenge
A university library consortium required modern React UI widgets embedded inside a legacy Angular 12 ILMS without a full rewrite — preserving Angular routing, auth, and change detection.
Solution
Built a Web Components layer with Shadow DOM isolation, custom event buses for Angular↔React communication, and a shared design token system. Delivered catalog search, reservation flows, and accessibility-compliant forms as framework-agnostic custom elements.
The constraint
The ILMS shell could not be replaced. Angular 12 routing, auth, and change detection had to remain untouched while product teams demanded modern React UX for catalog and reservations.
The bridge
Web Components with Shadow DOM isolated styles. A typed custom-event bus carried domain events between Angular services and React islands. Storybook documented each widget for QA and accessibility review.
Outcome
Twelve production widgets shipped incrementally. Teams stopped debating framework religion and started shipping features again.
Impact
- Shipped 12 React widgets into production Angular shell
- Zero regression in Angular change detection cycles
- WCAG 2.1 AA compliance across all new components
Lessons learned
- Framework boundaries are organizational boundaries — design for team autonomy.
- Accessibility belongs in the component contract, not a late audit.
- Shadow DOM saves you from global CSS wars in brownfield apps.