How to add react components to angular project?

Question

I have to add some angular components to angular project and I found this package. I did the following steps:

npm install react2angular react react-dom prop-types --save into the angular project

Add a directory (in the root project) named src and inside it one index.js with the following code:

import { react2angular } from "react2angular";
import React from "react";

function Example() {
  return <button type="button">Click me</button>;
}

angular
  .module("myModule")
  .component("example", react2angular(Example, ["apiUrl", "token"]));

after this I moved in the angular code and I added
```
<example api-url="123" token="456"/>
```

Nothing happens. No button appears.

This seems to be made based on the official documentation. Did I do something wrong? Keep in mind that I have no experience with angular, this is why I want to work with react.

Why are you doing an angular project if you want to work only in react ? — Nicolas Menettrier
– Nicolas Menettrier, Commented Nov 4, 2021 at 9:55
because the angular projec has been made like 5 years ago and I can't do it again because it is super huge. — Loudrous
– Loudrous, Commented Nov 4, 2021 at 10:03
can you show where you use myModule? Most likely, your angular module myModule is not registered. — yadejo
– yadejo, Commented Nov 4, 2021 at 10:16
You can't rewrite the app but you can certainly rewrite the component... — Salketer
– Salketer, Commented Nov 4, 2021 at 10:19
@yadejo it is a fictitious name.. I think I have to put there the name of the module where I am going to use this component, right? — Loudrous
– Loudrous, Commented Nov 4, 2021 at 10:27

sreejith · Accepted Answer · 2021-11-09 08:50:32Z

1

1. Create a React component

    import React from 'react';
    const ReactComponent = ({ fooBar, baz}) => (
      <div>
      <span>value: {fooBar} </span>
      <button onClick={baz}>
        Add one
      </button>
      </div>
     );

   export default ReactComponent;

2. Expose it to Angular

    import { react2angular } from 'react2angular'

    angular
      .module('myModule', [])
      .component('myComponent', react2angular(ReactComponent, ['fooBar', 'baz']))

3. Use it in your Angular 1 code

    <my-component
     foo-bar="3"
     baz="'baz'"
    ></my-component>

https://stackblitz.com/edit/react2angular-multiple-modules-cg9zaw?file=angular-component.js

answered Nov 9, 2021 at 8:50

sreejith

788 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Loudrous Over a year ago

Thank you! This is right, but in my specific case the problems were different. I had to inject it in my gulp file.

Mathesh · Accepted Answer · 2022-07-11 05:03:50Z

-1

Please go through below link, by adding wrapper class you can add react component or react npm plugin in to angular project.

https://thalava.com/how-to-use-react-web-components-in-angular.

points to note

Add wrapper component in appmodule.ts
do npm install after adding react dependencies in package.json

answered Jul 11, 2022 at 5:03

Mathesh

796 bronze badges

1 Comment

max-lt Sep 13 at 8:13

The link you posted is a dead link

Collectives™ on Stack Overflow

How to add react components to angular project?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related