Codebase Conversion: Building a MEAN.js AngularJS Project with Create-React-App

[markerikson]

No description provided.

[markerikson]

Original author: Jack Zhao
Original date: 2020-05-06T16:33:01Z

You are a lifesafer Mark!! I started a fresh React app to see how much I can progress, but there were too many views so I'll probably need to adopt your incremental approach. I'll give what you have here a try! How did react2angular work out? Did you launch your production webpack build in the end?

[markerikson]

Original date: 2020-05-06T16:50:17Z

Thanks! I threw this post together literally the day after I'd hacked in the core CRA conversion. I've made a number of additional tweaks and fixes to the setup since then - I'll try to update the post this weekend with a more complete list of changes.

Technically the work I've done is still waiting to get merged in to our main dev branch, as we've had a bunch of other stuff that was critical to get in for a pending release. That said, I've actually gone on and built out a new feature completely using React +TS, and it's worked out great. There's been some screwy interop stuff I've had to do (like using a `useLayoutEffect` to mutate a prop coming from Angular to ensure it's been updated properly), but it's all doable if you do truly understand how the two systems behave.

And yeah, react2angular does what it says on the box. I did learn a few key bits. For example, Angular templates _must_ have everything kebab-cased, both tag names and attribute names, while the JS props you reference are camelCased. So, I have `<my-component is-editing="vm.some.value">` in the template, but `angular.module("SomeModule").component("myComponent", react2angular(MyComponent, ["isEditing"], ["SomeInjectedService"]))` . Note the differences in casing.