如何将现有的 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;
        }]);
    }]);

示例：卸载组件时清理 Angular 应用

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