Integrate Angular in React

Experiment project for dynamically loading Angular application in React

Intro

In situation where a big application has multiple teams working with different frontend framework or structures.

For example, we have a outer commonly used container which is built using React. The content of this container is built with Angular in a different framework and frontend.

This setup should support the following features:

Hosted in different domain / servers
Can be changed and built independently
Any changes in the content application can be reflected without rebuilding the container
Can support multiple child content
Data can be passed down to the child content application (React state can be passed down to the Angular application)

This concept is built base on this article.

Running the application locally

Installing the dependencies for both applications:

# 1. Install Angular app dependencies
cd angular-app
npm install

# 2.Install React app dependencies
cd ../react-container
npm install

Start Angular App

This will run the app on a given port (4200 locally). Then we can access the necessary Web Component scripts in React using localhost:4200

cd angular-app
np serve

Start React App

This will start the main container, it will run the React application. It will automatically load in the Angular App in the content section.