coatue-oss / angular2react Goto Github PK

we are using angular 1.4 which doesn't have components. is there a way to use this with directives? thanks!

Is there a possibility of changing deprecated lifecycle methods?

Neither componentWillMount nor componentWillReceiveProps will work in v17 plus there're console warnings in 16.9.

Thanks

https://reactjs.org/docs/hooks-intro.html

import React, { useState } from 'react'
import { react2angular } from 'react2angular'

export let Four = ({ four }) => {
  const [number, setNumber] = useState(four)
  return (
    <React.Fragment>
      <div>
        number: {number}
      </div>

      <button onClick={() => setNumber(number + 1)}> Plus </button>
    </ React.Fragment>
  )
}

export let FourAngular = react2angular(Four, ['four'])

Currently we do like this:

import React from 'react'
import { react2angular } from 'react2angular'

export class Four extends React.Component {
  constructor (props) {
    super(props)
    this.state = { number: props.four }
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick () {
    this.setState(prevState => ({
      number: prevState.number + 1
    }))
  }

  render () {
    return (
      <div>
        <p>number: {this.state.number}</p>
        <button onClick={this.handleClick}> Plus </button>
      </div>
    )
  }
}

export let FourAngular = react2angular(Four, ['four'])

Based on https://github.com/bcherny/angular2react-demos/blob/master/multi-file/src/Four.jsx

I'm trying to use react2angular together with angular2react to gradually migrate our Angularjs project to React. I have successfully converted and used a React component but would also like to use our existing angular components inside the new React components.

I'm struggling with step #1 - I'm having trouble getting a reference to $injector before calling angular2react. Angular gets bootstrapped after all the imports. I am also using webpack. Is there any working example I could follow? Thanks for these libs btw!

When running npm test on windows failing with

$ npm test

> [email protected] pretest C:\git\angular2react
> npm run build


> [email protected] build C:\git\angular2react
> npm run clean; tsc -d && mv ./index.js ./index.es2015.js && tsc -t es5

npm info it worked if it ends with ok
npm info using [email protected]
npm info using [email protected]
npm ERR! missing script: clean;

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\shnayder\AppData\Roaming\npm-cache\_logs\2018-02-19T19_16_18_515Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `npm run clean; tsc -d && mv ./index.js ./index.es2015.js && tsc -t es5`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\shnayder\AppData\Roaming\npm-cache\_logs\2018-02-19T19_16_18_535Z-debug.log
npm ERR! Test failed.  See above for more details.

This seems to fix it

diff --git a/package.json b/package.json                                                  
index ae34dcc..7a98b28 100644                                                             
--- a/package.json                                                                        
+++ b/package.json                                                                        
@@ -6,7 +6,7 @@                                                                           
   "main:esnext": "index.es2015.js",                                                      
   "typings": "index.d.ts",                                                               
   "scripts": {                                                                           
-    "build": "npm run clean; tsc -d && mv ./index.js ./index.es2015.js && tsc -t es5",   
+    "build": "npm run clean && tsc -d && mv ./index.js ./index.es2015.js && tsc -t es5", 
     "clean": "rm -f ./*.d.ts; rm -f ./*.map",                                            
     "pretest": "npm run build",                                                          
     "prepublishOnly": "npm test",                                                        

does this make sense on Linux ?

There are quite a few projects around here that are on angular 1.5 and want to convert slowly to React using angular2react. It would be great to not have to upgrade to 1.6 before migrating to react.

Is there a reason this project requires angular 1.6, or would it be happy with 1.5.x || 1.6.x?

@khoomeister What do you think? I feel like neither of us keep the Greenkeeper PRs up to date anyway, so they're mostly noise.

Can you be more specific on what versions of AngularJS this works with?

The package.json mentions react as a peer dependency, but the syntax might be incorrect.

  "peerDependencies": {
    "angular": ">=1.5.0",
    "react": "^>=15.0.0", ---> `>=15.0.0` instead of `^>=15.0.0` 
    "react-dom": ">=15.0.0"
  }

^15.0.0 is equivalent to >=15.0.0 <16.0.0
>=15.0.0 is equivalent to >=15.0.0
So ^>15.0.0 doesn't make much sense.

When I try to install the dependencies in my project and in the https://github.com/bcherny/angular2react-demos project I see the following:
npm WARN [email protected] requires a peer of react@^>=15.0.0 but none is installed. You must install peer dependencies yourself.

If I try to list both angular2react and react I see the following:

[email protected] /Users/teodorasandu/Documents/Cloud/angular2react-demos/multi-file
└── [email protected]

$ npm list react
[email protected] /Users/teodorasandu/Documents/Cloud/angular2react-demos/multi-file
└── (empty)```
But I can see `react` in the `node_modules`

It looks like react does not get installed properly, and it might be because of the syntax for peer dependencies. Any thoughts?

Hi,

I am about to migrate a huge app from AngularJS to React and want to use this wonderful tool to help me to do it in an iterative way.

Using React Router v6 and a BrowserRouter (to have a client side routing and not a server side routing), each time the route leads to a component tree containing at least an AngularJS component ('reactified' using angular2react), the browser navigates to the URL: I have a page refresh instead of a client side routing.
If my route leads to a component tree only composed by React components, client side routing works as expected.

Note that I have the same behavior with TanStack Router, so I guess this is not a router issue.

Does anyboby knows why this happens? Is it an AngularJS effect or a angular2react issue? Is there a workaround?
Any help very appreciated!

My code is like

               <div key="newWidget" style={{border: '1px dotted'}}>
                    <AngularComponent onClick={() => this.openNewModuleModal()}>New Widgets</AngularComponent>
                </div>

If I move onClick on the outer div it works, but if I leave the onClick on AngularComponent it isn't triggered. Any idea?

Hi. Thanks for the helpful library. I think there's a few issues with the package.json dependencies.

• React, React Dom, and Angular should be peer dependencies, not regular dependencies. Libraries should not dictate the versions of code that an app is expected to import because then conflicting versions will happen. Since no one would ever use this without already having all of these libraries, they can be safely moved to peer dependencies.
• React 15 support was dropped even though it would still work. There's not much reason to drop support for 15 if you are not using portals or componentDidCatch. React 16 hasn't been out too long and a lot of people are still on 15 while bugs are being ironed out (I'm personally waiting on an enzyme bugfix before I upgrade to react 16 because the old enzyme does not support it). If react and react-dom were moved to peer dependencies, the semver could allow both 15 and 16.
• The @types packages should be dev dependencies, not regular dependencies.

I can make a PR to address them if you are open to making these changes.

Has any example with Context API? I've tried use Context Api with this example

https://github.com/bcherny/angular2react-demos/tree/master/multi-file

But doesn't work.

I thinks is because angular2react create a new tree.

Currently, componentWillUnmount only calls this.state.scope.$destroy().
It should also "destroy" the compiled element so $destroy is trigger: https://docs.angularjs.org/api/ng/function/angular.element#events

$destroy - AngularJS intercepts all jqLite/jQuery's DOM destruction apis and fires this event on all DOM nodes being removed. This can be used to clean up any 3rd party bindings to the DOM element before it is removed.

3rd party libraries depend on this: see $mdMenu fron AngularJS Material.

How to implement:

1. In compile do: this.setState({ compiledElement: $injector.get('$compile')(element)(this.state.scope) });
2. In componentWillUnmount do angular.element(this.state.compiledElement).empty();

I want to start by saying that I really like what you've accomplished here. It's a really useful tool for those which want to gradually migrate an AngularJS project to the newer world.

I found that the angular2react can be a bit hard to use and thus I've created a wrapper function which simplifies the API so my team members would use it more comfortably. As you'll see, we don't need to pass the $injector and register the angular component ourselves. It's all done automatically

Here it is:

import { IComponentOptions, module } from 'angular';
import { angular2react } from 'angular2react';

// All converted components have to be registered, thus we create our own module in which we'll register the original ng components.
const ngModule = module('converted-ng-components', []);

let $injector;
ngModule.run(['$injector', $i => $injector = $i]);

export function myAngular2React<Props extends {}>(name: string, options: IComponentOptions) {
  ngModule.component(name, options);

  return angular2react<Props>(name, options, {
    // angular2react requires the $injector but doesn't actually use it until a component needs to be rendered.
    get get() {
      return $injector.get;
    }
  } as any);
}

export const convertedNgComponentsModuleName = ngModule.name;

If you think this approach is fine, I can make a pull request.

Hi! I'm loading my own scripts which already load a specific version of angular. But when I use angular2react I see v1.8.3 is being loaded by angular2react.
Can I disable this loading? I see that the angular2react component imports angular, but it looks like it's only using it for it's types.
Thanks!

Is there a way to pass a callback to angular component from react component?

I have an angular component that is a child of react component. The mapping from the parent (react) to the child (angular) works fine with < bindings. What I need is the other way communication: from the child (angular) to the parent (react) with '&' bindings. Is there a way to do it?

first,my English is just so so,In my project,angular's file and react file are separate files,After studying your github's readme file and Apply to the project,It can't work,because angular's code is a separate written,I don't know how to write variables which in the example to a right place,please write an example in your github,tankyou verymuch,A Chinese beginner.