How to Dynamically Integrate Angular in React and Share Data Between Both

Original photo by Дмитрий Хрусталев-Григорьев on Unsplash

Use Case: Recently, I had to find a way to integrate an Angular module inside a React app. The two needed to share data, with the React app passing data down to the Angular module to trigger an action, and then some data being passed back up to the React app. The integrated module had to be dynamically rendered, meaning if the module code is updated, then the entire React app shouldn’t need to be restarted. Ideally, the two should be running independently on different URLs and shouldn’t need to be in the same repo or even server to work together.

Solution: Web Components! After much research and trial and error, Web Components saved the day. There are quite a few articles explaining how to use Web Components with Angular and React, but good examples of sharing data and dynamic rendering were scarce. So I decided to write this article with all the steps needed to create a dynamic multi-app from scratch. Full code can be found here.

Note: I also tried using Webpack 5 Module Federation, which you’ll probably see often as a potential solution, but that required a lot of complicated overhead. The ultimate solution here doesn’t require Webpack 5 and the Angular Web Component we create can be dynamically loaded in any JavaScript application, in a simple, framework-agnostic manner.

Angular app setup with Web Component

First, we’ll start by creating a new Angular app called ‘angular-app’ which will transform a simple module into a Web Component and build some static scripts using @angular/elements (you’ll need to have nginstalled and ready to use)

1. Create a new Angular project: ng new angular-app
2. Install dependencies: ng add @angular/elements
3. Modify angular-app/src/app/app.component.html, replace all contents with a simple text:

4. Modify angular-app/src/app/app.module.ts to create a Web Component of the Angular module in its constructor; replace all with:

5. In angular-app, run ng build to build the static Web Component files which we'll use later in our host React application.

💡 Learn how to extend existing Angular schematics to add new functionality:

Extending Angular Schematics: A Step-by-Step Guide

👉 To read more such acrticles, sign up for free on Differ.

React app setup

Next, we’ll create a simple, minimal React application called ‘react-app’ (you’ll need to have npm and node installed and ready to use)

1. Create a new React app using: https://github.com/MachineLlama/react-setup. Run with: node start react-app

• alternatively, you can use React Create App

Build, copy, and run Angular module in React

Now we can copy the required scripts that were built in the Angular app into our React app and import them in a component

1. Create a new folder: react-app/src/angular-files
2. Copy these files from angular-app/dist/angular-app to react-app/src/angular-files: main.js, polyfills.js, runtime.js, styles.css, styles.js (if it exists), and vendor.js
3. Modify react-app/src/App.js to import the Angular Web Component static files and to render the new custom element

4. In react-app, run npm run start

• You should see ‘llama’ rendered on the running app, which comes from the Angular Web Component (yay!)

Pass data from React down to the Angular Web Component

In most cases, we’ll want the React and Angular parts of our application to communicate with each other. So let’s see how we can pass data to the Angular Web Component using attribute values

1. Add an input variable to the Angular module in angular-app/src/app/app.component.ts

2. Show reactValue in angular-app/src/app/app.component.html. replace all with:

3. Add an input in react-app/src/App.js, whose value we will pass down from the React app to the Angular Web Component (important: notice the attribute in the Web Component is react-value to match the Angular variable of reactValue)

4. In angular-app, run ng build and copy files from angular-app/dist/angular-app to react-app/src/angular-files

Get Machine Llama’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

5. In react-app, run npm run start

• you should see an input in your React app, which will update text in the Angular Web Component (nifty)

Pass data from Angular Web Component up to React app

After performing an action in the Angular Web Component, we’ll likely want to pass data back to the React application or trigger another action outside of the Web Component. To do that, we’ll make use of Custom Events, which is an easy way of watching for any data you want to emit from your Web Component

1. Add an input in angular-app/src/app/app.component.html, replace all contents with:

2. Optional: add some styling for angular-app-container in angular-app/src/app/app.component/scss

3. Add an onKey function to angular-app/src/app.app.component.ts, which emits a Custom Event whenever the Angular Input is changed:

4. In react-app/src/App.js, add a listener to get and display the angular input value being emitted from the Web Component:

5. In angular-app, run ng build and copy files in angular-app/dist/angular-app to react-app/src/angular-files

6. In react-app, run npm run start

• now we have a React app rendering an Angular module wrapped in a Web Component, with data going both ways between the two (nice)

Final product:

Dynamically load scripts (no more copying needed)

This is crucial for large-scale production applications because it means we can make updates to small parts of our application (which can be running independently on different ports or servers) without needing to update or restart the main app. The user will simply need to refresh their browser to see new content and the app will have no downtime

1. In react-app, run npm i web-component-load
2. Update react-app/src/App.js to remove static imports; you can call the load function from web-component-load with a given URL and all the Angular chunk files will be appended as scripts (or link for the styles.css file) to the running app’s document head section if that particular script/link doesn’t exist already

3. Run angular-app with ng serve. This will run the app on a given port (4200 in this case) and we can access the necessary Web Component scripts from there (via the load function in web-component-load)

4. Run react-app with npm run start and everything should work the same as before

5. Now try updating angular-app/src/app/app.component.html and restarting angular-app with ng serve. If you refresh your React app in your browser, you'll see the update to the Angular Web Component without needing to copy static build files over and without needing to restart the React application (so cool)

With this, we can create an Angular Web Component (which can do anything a normal Angular module can do) and have it dynamically rendered in any other application.

Thank you for reading.

In Plain English 🚀

Thank you for being a part of the In Plain English community! Before you go:

• Be sure to clap and follow the writer ️👏️️
• Follow us: X | LinkedIn | YouTube | Discord | Newsletter
• Visit our other platforms: CoFeed | Differ
• More content at PlainEnglish.io