javascript - Cum să migrezi o aplicație Angular 2 existentă în TypeScript către ReactJS?

Avem un cod existent care este scris în Angular 2 folosind TypeScript. Dar acum plănuim să migrăm codul către ReactJS. Nu sunt foarte sigur cum putem face acest lucru, fără a rescrie întregul cod separat de codul existent.

Ceea ce caut este o soluție care să ne permită să folosim atât componente Angular, cât și componente React și dependențele lor, funcționând în corelație una cu cealaltă.

Răspuns #1

Acesta este un proces dureros, dar este de fapt realizabil. Aplicația rezultată va deveni în cele din urmă imposibil de întreținut, așa că îți sugerez să faci acest lucru doar pentru tranziția către aplicația React refactorizată.

Câteva exemple:

Exemplu: Integrarea angular-bootstrap-datetimepicker

angular
  .module('ngApp', ['ui.bootstrap.datetimepicker'])

class AngularWidget extends React.Component {
  componentDidMount () {
    angular.bootstrap(this.container, ['ngApp']);
  }
  
  html = `<datetimepicker data-ng-model="data.date"></datetimepicker>`;

  render = () => (
    <div
      ref={c => this.container = c}
      dangerouslySetInnerHTML={{__html: this.html}}
      />
  );
}

Exemplu: Hacking UI Router

componentDidMount() {
  angular.module('ngApp')
    .run(($state) => {
      $state.go = (state, params, options) => {
        console.log('hijacked ui router');
      }
    })
  angular.bootstrap(this.container, ['ngApp']);
}

Exemplu: Neutralizează manipularea locației în Angular

angular.module('ngApp', [])
    .config( ['$provide', function ($provide){
        $provide.decorator('$browser', ['$delegate', function ($delegate) {
            $delegate.onUrlChange = function () {};
            $delegate.url = function () { return ""};
            return $delegate;
        }]);
    }]);

Exemplu: Curăță aplicația Angular când componenta se demontează

class AngularWidget extends React.Component {
  componentDidMount() {
    this.$rootScope = angular.injector(['ng', 'ngApp']).get('$rootScope');
    angular.bootstrap(this.container, ['ngApp']);
  }
  componentWillUnmount() {
    this.$rootScope.$destroy();
  }
  render = () => (
    <div
      ref={c => { this.container = c; }}
      dangerouslySetInnerHTML={{ __html: '<widget></widget>' }}
    />
  )
}

Ref: https://medium.com/appifycanada/angular-components-in-react-2c929130f995