Error while rendering react components in angular app

Question

I am trying to render react components inside the angular 7 app. I am able to render simple react components but I am getting the below error (in browser console) when I try to render Superset react plugins inside the angular app.

SupersetClientClass.js:2 Uncaught ReferenceError: regeneratorRuntime is not defined
    at SupersetClientClass.js:2
    at SupersetClientClass.js:2
    at Module../node_modules/@superset-ui/connection/esm/SupersetClientClass.js (SupersetClientClass.js:3)
    at __webpack_require__ (bootstrap:78)
    at Module../node_modules/@superset-ui/connection/esm/SupersetClient.js (SupersetClient.js:1)
    at __webpack_require__ (bootstrap:78)
    at Module../node_modules/@superset-ui/connection/esm/index.js (index.js:1)
    at __webpack_require__ (bootstrap:78)
    at Module../node_modules/@superset-ui/chart/esm/clients/ChartClient.js (ChartClient.js:1)
    at __webpack_require__ (bootstrap:78)

I searched online about this error, but I could not resolve it. It seems to be an error related to babel. Please let me know if I am missing something as I am new to react js. Any help is highly appreciated. Thanks

Answer 1

It will be the same as doing it in a html file but you would add your react build files to the angular cli json file in the scripts section and then add the css to the styles section.

Then in the component you want to bootstrap the app have a container component and add the bootstrap code to the ngAfterViewInit method.

<div #react></div>

and in the Typescript

@ViewChild('react') reactElement;

ngAfterViewInit() {
  ReactDOM.render(React.createElement(App, null), this.reactElement.nativeElement);
}