# 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](/docs/framework/api-adapters/). WU uses a framework-independent lifecycle contract.

<span id="conservar-cada-framework-y-compartir-un-contrato"></span>

<span class="section-anchor" id="section-1"></span>

## 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.

<span id="react-registrar-el-renderer-que-usa-tu-aplicación"></span>

<span class="section-anchor" id="section-2"></span>

## 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](/docs/framework/integrations/) shows registration with an explicit runtime and mounting from Astro.

The complete starting path is to [create a React app](/docs/guides/quickstart/), [add Vue](/docs/guides/add-an-app/) and [share a counter](/docs/guides/shared-counter/). The final example includes source files and a ZIP; use it to check changes from both renderers and cleanup on unmount.

<span id="angular-elegir-el-adapter-correcto"></span>

<span class="section-anchor" id="section-3"></span>

## 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](/docs/framework/api-adapters/#angularregisterstandalone). The CLI offers an Angular template with build configuration and standalone registration: review its files in [CLI templates](/docs/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](/docs/framework/api-adapters/) for options and verified versions.

<span id="comunicación-entre-react-y-angular"></span>

<span class="section-anchor" id="section-4"></span>

## 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](/docs/guides/shared-counter/) and [RPC sum service](/docs/guides/rpc-between-apps/) 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.

<span id="vue-svelte-lit-y-otros-renderers"></span>

<span class="section-anchor" id="section-5"></span>

## 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](/docs/framework/api-adapters/) describes their differences; [templates](/docs/cli/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](/docs/guides/production/) to review published assets and [troubleshooting](/docs/framework/troubleshooting/) if an app appears blank.