Is there any plan/way to use UI-Router for angularJs/Angular/React together in a SPA?

[tejaswiniKanigolla]

My Project is a UX Platform (a SPA), where we have experiences rendered in AngularJs ,Angular. We are currently using uirouter/angular-hybrid for managing the states in our application. Now, we also want to support react experiences in our platform. Today there is no out of box support from uirouter -which works for AngulrJS,Angular and React together. With this context set, I would like to know some inputs on below questions in specific.

1. Is there any plan to support all 3 Frameworks in single ui router package?
2. Are there any alternative suggestions/methods to have common routing for all 3 Frameworks?

[christopherthielen]

There are not currently any plans to support routing to all 3 frameworks. I have some thought around how this (routing to arbitrary component libraries) could be done but it would require significant rework of uirouter core, and I simply don't have enough time to invest.

An alternative would be to route to an AngularJS component that wraps a react component. I'm using https://github.com/coatue-oss/react2angular at my day job and it works very well.

[hkgupta]

We have tried wrapping React Components into angular 5 components and it works as well. Problem comes when we have to support nested routing using react component. UIView or ui-view will be completely ignored in the templates.
If you guide us we can contribute to this repository by adding support for supporting all three frameworks.

[christopherthielen]

Here's an example proof of concept for routing to AngularJS components inside a React component.

https://github.com/ui-router/angular-hybrid/compare/angularjs-angular-react-hybrid?expand=1

This uses angular2react and react2angular to wrap angularjs components as react (the ui-view component) and to wrap react components as angularjs (the react-component).

// An angularjs component that renders an angularjs ui-view
const angularJSUIViewComponentDefinition: angular.IComponentOptions = {
  bindings: { name: '=' },
  controller: function () {
    this.name = this.name || '$default';
  },
  controllerAs: '$ctrl',
  template: `<ui-view name="{{$ctrl.name}}"></ui-view>`
};

angular.module('reactcomponent', ['angular2react'])
    // Register the angularJsUiView with angularjs
    .component('angularJsUiView', angularJSUIViewComponentDefinition)
    // Wraps the ReactComponent as an angularjs component
    .component('reactComponent', react2angular(ReactComponent, null));

interface UIViewProps { name?: string }
// Wraps the angularJsUiView as a React component
const AngularJSUIView = angular2react<UIViewProps>('angularJsUiView', angularJSUIViewComponentDefinition, $injector);