Microfrontends with React, Angular and WU
Integrate React and Angular with WU Framework: shells, adapters, communication and gradual migration. Explore React/Vue examples and Svelte and Lit bindings too.
This guide develops the React and Angular case as an integration example. To work with Svelte, Stimulus or any of the other included technologies, see the complete adapter catalog. WU uses a framework-independent lifecycle contract.
Keep each framework and share a contract
A page can host a React capability and an Angular capability without converting their components to the same renderer. Each app keeps its build; the shell provides a container and WU coordinates its lifecycle. The same approach supports gradual migration: replace one capability at a time and preserve the product’s entry routes.
This requires adapting application entry points. A SPA that controls the whole document is not integrated just by adding its URL to the catalog. It must mount inside the supplied container and release its resources when unmounted.
React: register the renderer your application uses
The React adapter receives the root component and the React and ReactDOM instances. Use the same runtime as your build; the integration guide shows registration with an explicit runtime and mounting from Astro.
The complete starting path is to create a React app, add Vue and share a counter. The final example includes source files and a ZIP; use it to check changes from both renderers and cleanup on unmount.
Angular: choose the right adapter
WU provides different entry points for module-based applications, standalone components and Angular Elements. Choose according to your application’s architecture, not the container’s name.
| Angular application | WU API | What to prepare |
|---|---|---|
| NgModule-based | register |
Root module, platform and root selector |
| Standalone component | registerStandalone |
Component, configuration and Angular creation functions |
| Angular Elements | registerElement |
Angular Elements dependency and custom element name |
See signatures and options in the adapter reference. The CLI offers an Angular template with build configuration and standalone registration: review its files in CLI templates before moving an existing application.
Framework 4 supports standalone input updates, zoneless mounting and applications using Zone.js. Keep-alive pauses and resumes the component change detector. See the adapter matrix for options and verified versions.
Communication between React and Angular
Keep visual state inside each renderer. Share data through the store, facts through events and operations through contracts/RPC. In Framework 4, bindings inside a microapp use its facade and identity; declare the required requests and grants. Outside a WU mount, standalone bindings may use the global runtime.
The shared counter and RPC sum service examples teach the contracts using React and Vue. When porting them to Angular, retain the contracts and adapt subscription, view updates and cleanup to its lifecycle.
Vue, Svelte, Lit and other renderers
The package also publishes adapters for Vue, Svelte, Preact, Solid, Lit, Vanilla, Alpine, Qwik, Stencil, HTMX and Stimulus. Astro and Next have shell integrations. The adapter catalog describes their differences; templates distinguish generation support from each framework’s full pipeline.
Before migrating another capability, check mounting, navigation, styles, communication and unmounting with your project’s versions. Use production to review published assets and troubleshooting if an app appears blank.