Integrate/Import Angular (v6) component(s) inside React.js applications

Since a long time web developer community is fighting/arguing about superiority between Angular and React.

This does impact while you are trying to build an enterprise level frontend application(s). Application’s few module could be best candidates for React and/or few for Angular. Or your team has diverse skill sets with Angular and React.js. For product development, either of the technology will get finalised and people have to learn/pick up irrespective of their choice. That means if React.js won then Angular developers must start learning/working with React.js and vice versa.

Since React.js has been in market from long time and well proven, people tends to choose it over Angular. This disappoint Angular lovers (including myself).

No worries though!!

With introduction of Angular Elements in Angular version 6, now you can build an Angular component, export them and integrate/import them inside React.js application.

React.js will not a single dependency on Angular framework and its terminology. For React.js it will be simple web component like html element <button> or <input>.

Sounds interesting? Checkout demo

Let’s build a login component in Angular and export it so that we can use it in React.js

Part 1 — Building Login web component in Angular

Refer to my other blog about how to create an Angular Elements.

  • Configure AppModule for exporting <ng-login> as a web component from LoginComponent

Login Component should be able to accept UserName and Password from outside world. That means, React.js can set default username and password for <ng-login>. Hence we need to define two @Input() properties for username and password.

Once user presses “Login” button, Angular’s LoginComponent will emit “login” event with updated username and password. React.js can subscribe to this event and handle authentication based on it’s custom logic. For this event, we will need @Output() login property.

Once we are done with LoginComponent functionality and configuration, let’s export it as a web component. Unfortunately the command specified in previous blog to create a single bundle file doesn’t work with React.js integration. Hence we shall go through different approach. We shall build application which shall generate 3 files.

Run the below command:

ng build --prod --output-hashing none

This shall create dist/ng-login folder which we will need for react integration.

Part 2 — Hosting Login component inside React.js

I am Assuming you have a new/existing React.js application created. If not, create one using create-react-app or any other seed CLI package. Once created, go to public folder and create a folder ng-elements.

Copy below three files from dist/ng-login folder and paste inside ng-elements folder:

runtime.js
polyfills.js
main.js"

Now, open index.html file and link these js files.

App.js

We can now start using Angular component in our React.js component. For sake of simplicity, I am putting <ng-login> inside App component.

  1. Let’s define default username and password to be passed to Angular component

2. In render() method, let’s put <ng-login> element. We are creating a local reference to <ng-login> element so that we can subscribe to it’s event in componentDidMount() method. We are passing default username and password as attribute values.

3. Let’s subscribe to login event which will be fired from Angular component when user press “Login” button”

4. Let’s display username and password provided by user on page once user presses “Login” button.

and that should be it!

Now if you run npm run start or yarn start command then you should see output in your browser something like this:

Integrating Angular’s component inside React.js

Complete source code for Angular component and React.js application can be found on GitHub repository:

Cheers!

Cloud Solution Architect | Author | Full Stack Developer | https://www.linkedin.com/in/balram-chavan | https://www.hiretheauthor.com/balramchavan

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store