Add browser-compatible build

[tlvince]

Right now, two build targets are produced (index.js and index.es2015.js). Could we also add a browser-compatible target?

I quickly hacked together a build using rollup without realising rollupify also already being run for the Karma tests. Could this be reused?

[bcherny]

Hi @tlvince! What's your use case for this? Our assumption is anyone who consumes react2angular will want to control how exactly it's bundled into their build. index.js/index.es2015.js are meant to be consumed by a user via import, and bundled along with the rest of their build using Browserify/Rollup/Webpack/Closure whatever bundler they use.

[tlvince]

Hey! We've a legacy Angular 1.5 app that uses an old build chain (Gulp, bower and friends; i.e. no bundler... deep breath 😄) that's being transitioned into a React app. Integrating react2angular using the aforementioned hack worked perfectly, though it'd be great if a browser target could be added properly, particularly if its just a case of leveraging what's already there (rollupify).

[bcherny]

I see. PRs are welcome! In your PR I would:

• Try to use lodash/frompairs or lodash.frompairs, rather than lodash-es (would need to make sure that -es works for everyone first)
• Create a UMD build, rather than using IIFEs

[dhwang]

I'm in the same situation as @tlvince . Still learning webpack so no idea how to make this work.

BTW, I don't understand why a wrapper for Angular 1.x is done in TypeScript and ES6. I mean if I want to use TypeScript I would have switched to Angular 4.

[bcherny]

@dhwang PRs are welcome. Otherwise, @khoomeister or I will get to it at some point.

[kellyrmilligan]

is there a basic setup guide for this? from what I can tell, it's sort of implied that you need to use a bundler to use this at all. I have a legacy anglular app, and would like ot write some components in react in it to begin migration. The trouble is that it does not use any bundling or build process at all. are there library versions of this that you can just put in the head of the html file?

[bcherny]

@kellyrmilligan That's what this issue is tracking :)

You can do something like this in the meantime:

npm i browserify tsify
./node_modules/.bin/browserify -p tsify index.tsx -o bundle.js

[kellyrmilligan]

Awesome will give it a shot

[SevenZark]

Any movement on this? It seems pretty logical to figure that a lot of people using this package are using it precisely because they are transitioning from an older to a newer library (angular to React) but cannot afford to do a complete ground-up overhaul in React. These legacy apps were build in the era of script tags putting libraries as globals in the page. To entirely refactor an Angular 1 app to use modules and a modern bundler for all source files would be so prohibitively labor-intensive, that if we were going to do that, we would have just refactored in React from the ground up.

Anyway, that's exactly my own use case. If there won't be support for this, it'd be great to know a workaround that doesn't involve introducing a throwaway dependency with its own learning curve (like browserify). Anybody come up with anything like that?

(And I would happily put a PR out for it, but I'm afraid this is all outside my wheelhouse and beyond my understanding atm).

[vbfischer]

If its helpful, I forked it and together a quick rollup build for it here. https://github.com/vbfischer/react2angular I could create a PR if the owner of this Repo wants (and then get any suggestions/changes).