如何将现有的Angular 2 TypeScript应用程序迁移到ReactJS？

Question

我们有一个现有的代码库，使用TypeScript以Angular 2编写。但现在我们计划将代码库迁移到ReactJS。我不知道如何在不重写现有代码的情况下完成整个代码库。

我正在寻找一种解决方案，它可以让我们使用Angular和React组件及其相互关联的依赖关系。

Answer 1

这是一个痛苦的过程，但实际上是可行的。生成的应用程序最终将无法维护，因此我建议您仅在转换为重构的React应用程序时执行此操作。

一些例子：

示例：集成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}}
      />
  );
}

示例：黑客UI路由器

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

示例：中和Angular的位置篡改

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

示例：卸载组件时清理角度应用程序

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>' }}
    />
  )
}

参考：https://medium.com/appifycanada/angular-components-in-react-2c929130f995