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.
Building simple custom web element using Angular(v6) element
Angular 6 has been officially out with lots of cool features. One of them is “Angular Element”. Using Angular element…
- 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
Copy below three files from
dist/ng-login folder and paste inside
Now, open index.html file and link these js files.
We can now start using Angular component in our React.js component. For sake of simplicity, I am putting
- Let’s define default username and password to be passed to Angular component
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:
Complete source code for Angular component and React.js application can be found on GitHub repository:
integrate-angular-react - Building custom elements in Angular and using them in React.js