<div dir="ltr">Yes, sadly you'd have to fork it and work around it. I tried using <a href="http://unpkg.com">unpkg.com</a>, but without any luck because this library relies on some new ES6+ goodies.<div><br></div><div>But, you should be able to include React components in Angular components without the need of this libray, you'd just have to try and work with data flow somehow between angular and React, as I pointed before Rx.js should help you with that.</div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Tue, Aug 20, 2019 at 4:42 PM Alexandre Briani Kieling <<a href="mailto:abrianik@redhat.com">abrianik@redhat.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div class="gmail_default" style="font-size:small">Karel,</div><div class="gmail_default" style="font-size:small"><br></div><div class="gmail_default" style="font-size:small">I noticed that react2angular doesn't provide a build that supports global variables and it's not available at <a href="http://cdnjs.com" target="_blank">cdnjs.com</a>.</div><div class="gmail_default" style="font-size:small">I suppose I would need to fork the project and add support for it, right?</div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Tue, Aug 20, 2019 at 10:59 AM Karel Hala <<a href="mailto:khala@redhat.com" target="_blank">khala@redhat.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr">React2angular is great library to help you reach your goal!<div><br></div><div>As about react, you can easily do that by including CDN link and you are good to go [1].</div><div><br></div><div>[1] <a href="https://medium.com/@to_pe/how-to-add-react-to-a-simple-html-file-a11511c0235f" target="_blank">https://medium.com/@to_pe/how-to-add-react-to-a-simple-html-file-a11511c0235f</a></div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Tue, Aug 20, 2019 at 3:47 PM Alexandre Briani Kieling <<a href="mailto:abrianik@redhat.com" target="_blank">abrianik@redhat.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div class="gmail_default" style="font-size:small">Karel and Walden,</div><div class="gmail_default" style="font-size:small"><br></div><div class="gmail_default" style="font-size:small">Thanks for the very helpful information.</div><div class="gmail_default" style="font-size:small"><br></div><div class="gmail_default" style="font-size:small">When following the strategy that mixes React components in an AngularJS app using react2angular, at the end of the migration process the AngularJS app is replaced by a new React app, right? Have you had any issues with that?</div><div class="gmail_default" style="font-size:small"><br></div><div class="gmail_default" style="font-size:small">Also, my AngularJS app doesn't use JavaScript modules. Isn't that an issue when writing the React components?</div><div class="gmail_default" style="font-size:small"><br></div><div class="gmail_default" style="font-size:small"><br></div><div class="gmail_default" style="font-size:small"><br></div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Tue, Aug 20, 2019 at 10:15 AM Walden Raines <<a href="mailto:wraines@redhat.com" target="_blank">wraines@redhat.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr">Also worth mentioning are the various libraries that help with using react in angular and vice-versa.  You can import angular 1 services, etc. into react with ngimport [1], you can use react in angular with react2angular [2] and you can use angular2react [3] to use angular components within react.<div><br></div><div>You should definitely be able to accomplish what you desire without an iframe.</div><div><br></div><div>We used an older, no longer supported library to use a react component within our angular 1 application and it works great.</div><div><br></div><div>Cheers,<br>Walden<br><div><br></div><div>[1] <a href="https://github.com/bcherny/ngimport" target="_blank">https://github.com/bcherny/ngimport</a></div><div>[2] <a href="https://github.com/coatue-oss/react2angular" target="_blank">https://github.com/coatue-oss/react2angular</a></div><div>[3] <a href="https://github.com/coatue-oss/angular2react" target="_blank">https://github.com/coatue-oss/angular2react</a></div></div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Tue, Aug 20, 2019 at 4:16 AM Karel Hala <<a href="mailto:khala@redhat.com" target="_blank">khala@redhat.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div>Hello,</div><div><br></div><div>this thread can potentionally be interesting for others as well. I would propose incremental upgrade, you would take each page and replace parts of screen with react components.</div><div><br></div><div>Hopefully you can mix React and AngularJs apps together - it's not ideal, it's going to eat a lot of resources and it's not going to be efficient, but it's the optimal way.</div><div><br></div><div>You can have multiple angular apps on screen and render them to different DOM elements using bootstrap [1], similiar aproach can be achieved by ReactDom render[2].</div><div><br></div><div>The biggest downfall would be data communication, we have faced some similiar problem in ManageIq project</div><div> * redux - not ideal for AngularJs and I am not sure if you can hook react to already initiliazed redux (but you can give that a try)</div><div> * Rx.js - this would probably be ideal and you can use Subject to work as a message bus for data updates in React and Angular app</div><div><br></div><div>[1] <a href="https://docs.angularjs.org/api/ng/function/angular.bootstrap" target="_blank">https://docs.angularjs.org/api/ng/function/angular.bootstrap</a></div><div>[2] <a href="https://reactjs.org/docs/react-dom.html#render" target="_blank">https://reactjs.org/docs/react-dom.html#render</a></div><div>[3] <a href="https://rxjs-dev.firebaseapp.com/guide/subject" target="_blank">https://rxjs-dev.firebaseapp.com/guide/subject</a></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Mon, Aug 19, 2019 at 7:26 PM Alexandre Briani Kieling <<a href="mailto:abrianik@redhat.com" target="_blank">abrianik@redhat.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div style="font-size:small">Hi,</div><div style="font-size:small"><br></div><div style="font-size:small">I'm doing some research on strategies to convert AngularJS apps to React.</div><div style="font-size:small"><br></div><div style="font-size:small">My AngularJS app has the following characteristics:</div><div style="font-size:small"><ul><li>Based on AngularJS 1.7</li><li>Uses Angular PatternFly components</li><li>Doesn't use any modules system (the dependencies are accessed via global variables)</li></ul></div></div></blockquote><div>You can try ParcelJs[4], it's bundler that will not require any configuration, but it's limited. Once you get used to all files bundled together you can try webpack for further improvements.</div><div> </div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div style="font-size:small"><div>The ideal solution would allow me do run both apps at the same time so i don't miss any features during the process of incrementally converting each feature to React.</div></div></div></blockquote><div>You can do that with Angular's bootstrap method and ReactDom render.</div><div> </div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div style="font-size:small"><div><br></div><div>What do you think of showing parts of the AngularJS app inside iframes in the React app?</div></div></div></blockquote><div>Not really needed honestly, you'd have really hard time sending data from parent frame to iframe. You can use postMessage[4], but that's going to be a lot of code and hard to communicate.</div><div><br></div><div>[4] <a href="https://parceljs.org/" target="_blank">https://parceljs.org/</a></div><div>[5] <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage</a></div><div> </div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div dir="ltr"><div><br></div>-- <br><div dir="ltr" class="gmail-m_-8174156928653654217gmail-m_-1812626781862378350gmail-m_-2759311197734070815gmail-m_-1071049184145568972gmail-m_1737604592388291724gmail-m_-921503822268853889m_2204419086704153462gmail-m_8083456530454991074gmail_signature"><div dir="ltr"><div><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><p style="color:rgb(0,0,0);font-family:RedHatText,sans-serif;font-weight:bold;margin:0px;padding:0px;font-size:14px;text-transform:capitalize"><span>Alexandre</span> <span>Kieling</span><span style="text-transform:uppercase;color:rgb(170,170,170);margin:0px"></span></p><p style="color:rgb(0,0,0);font-family:RedHatText,sans-serif;font-size:12px;margin:0px;text-transform:capitalize"><span>Fuse Engineering</span></p><p style="color:rgb(0,0,0);font-family:RedHatText,sans-serif;margin:0px 0px 4px;font-size:12px"><a href="https://www.redhat.com/" style="color:rgb(0,136,206);margin:0px" target="_blank">Red Hat<span></span></a></p><div style="color:rgb(0,0,0);font-family:RedHatText,sans-serif;font-size:medium;margin-bottom:4px"><span><p style="font-size:12px;margin:0px">Remote, Brazil</p></span></div><div style="color:rgb(0,0,0);font-family:RedHatText,sans-serif;font-size:medium;margin-top:12px"><table border="0"><tbody><tr><td width="100px"><a href="https://www.redhat.com/" target="_blank"><img src="https://marketing-outfit-prod-images.s3-us-west-2.amazonaws.com/f5445ae0c9ddafd5b2f1836854d7416a/Logo-RedHat-Email.png" width="90" height="auto"></a></td></tr></tbody></table></div><table border="0"><tbody><tr></tr></tbody></table></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
_______________________________________________<br>
PatternFly mailing list<br>
<a href="mailto:PatternFly@redhat.com" target="_blank">PatternFly@redhat.com</a><br>
<a href="https://www.redhat.com/mailman/listinfo/patternfly" rel="noreferrer" target="_blank">https://www.redhat.com/mailman/listinfo/patternfly</a><br>
</blockquote></div><br clear="all"><div><br></div>-- <br><div dir="ltr" class="gmail-m_-8174156928653654217gmail-m_-1812626781862378350gmail-m_-2759311197734070815gmail-m_-1071049184145568972gmail-m_1737604592388291724gmail-m_-921503822268853889m_2204419086704153462gmail_signature"><div dir="ltr">Karel Hala</div></div></div>
_______________________________________________<br>
PatternFly mailing list<br>
<a href="mailto:PatternFly@redhat.com" target="_blank">PatternFly@redhat.com</a><br>
<a href="https://www.redhat.com/mailman/listinfo/patternfly" rel="noreferrer" target="_blank">https://www.redhat.com/mailman/listinfo/patternfly</a><br>
</blockquote></div>
</blockquote></div><br clear="all"><div><br></div>-- <br><div dir="ltr" class="gmail-m_-8174156928653654217gmail-m_-1812626781862378350gmail-m_-2759311197734070815gmail-m_-1071049184145568972gmail_signature"><div dir="ltr"><div><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><p style="color:rgb(0,0,0);font-family:RedHatText,sans-serif;font-weight:bold;margin:0px;padding:0px;font-size:14px;text-transform:capitalize"><span>Alexandre</span> <span>Kieling</span><span style="text-transform:uppercase;color:rgb(170,170,170);margin:0px"></span></p><p style="color:rgb(0,0,0);font-family:RedHatText,sans-serif;font-size:12px;margin:0px;text-transform:capitalize"><span>Fuse Engineering</span></p><p style="color:rgb(0,0,0);font-family:RedHatText,sans-serif;margin:0px 0px 4px;font-size:12px"><a href="https://www.redhat.com/" style="color:rgb(0,136,206);margin:0px" target="_blank">Red Hat<span></span></a></p><div style="color:rgb(0,0,0);font-family:RedHatText,sans-serif;font-size:medium;margin-bottom:4px"><span><p style="font-size:12px;margin:0px">Remote, Brazil</p></span></div><div style="color:rgb(0,0,0);font-family:RedHatText,sans-serif;font-size:medium;margin-top:12px"><table border="0"><tbody><tr><td width="100px"><a href="https://www.redhat.com/" target="_blank"><img src="https://marketing-outfit-prod-images.s3-us-west-2.amazonaws.com/f5445ae0c9ddafd5b2f1836854d7416a/Logo-RedHat-Email.png" width="90" height="auto"></a></td></tr></tbody></table></div><table border="0"><tbody><tr></tr></tbody></table></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
</blockquote></div><br clear="all"><div><br></div>-- <br><div dir="ltr" class="gmail-m_-8174156928653654217gmail-m_-1812626781862378350gmail_signature"><div dir="ltr">Karel Hala</div></div>
</blockquote></div><br clear="all"><div><br></div>-- <br><div dir="ltr" class="gmail-m_-8174156928653654217gmail_signature"><div dir="ltr"><div><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><div dir="ltr"><p style="color:rgb(0,0,0);font-family:RedHatText,sans-serif;font-weight:bold;margin:0px;padding:0px;font-size:14px;text-transform:capitalize"><span>Alexandre</span> <span>Kieling</span><span style="text-transform:uppercase;color:rgb(170,170,170);margin:0px"></span></p><p style="color:rgb(0,0,0);font-family:RedHatText,sans-serif;font-size:12px;margin:0px;text-transform:capitalize"><span>Fuse Engineering</span></p><p style="color:rgb(0,0,0);font-family:RedHatText,sans-serif;margin:0px 0px 4px;font-size:12px"><a href="https://www.redhat.com/" style="color:rgb(0,136,206);margin:0px" target="_blank">Red Hat<span></span></a></p><div style="color:rgb(0,0,0);font-family:RedHatText,sans-serif;font-size:medium;margin-bottom:4px"><span><p style="font-size:12px;margin:0px">Remote, Brazil</p></span></div><div style="color:rgb(0,0,0);font-family:RedHatText,sans-serif;font-size:medium;margin-top:12px"><table border="0"><tbody><tr><td width="100px"><a href="https://www.redhat.com/" target="_blank"><img src="https://marketing-outfit-prod-images.s3-us-west-2.amazonaws.com/f5445ae0c9ddafd5b2f1836854d7416a/Logo-RedHat-Email.png" width="90" height="auto"></a></td></tr></tbody></table></div><table border="0"><tbody><tr></tr></tbody></table></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
</blockquote></div><br clear="all"><div><br></div>-- <br><div dir="ltr" class="gmail_signature"><div dir="ltr">Karel Hala</div></div>