As mentioned in the readme, we should be able to use react directives in the react components. I am getting an error UIRouter instance is undefined. This is probably because ui-router (react) is not initialised. Is this the intended behaviour? I am migrating my Angular 1 project to React using react2angular by rewriting the angular components in react. The main app is still in Angular which uses ui-router (angular) for routing.

When routing to a React component, that component can use the standard React directives (UIView, UISref, UISrefActive) from @uirouter/react.

Trying to pass custom parameters into a UIView using the render method as suggested here: ui-router/react#26

<UIView render={(Component, props) => <Component {...props} {...someOtherProps} /> } />

seems that render is not actually working when using react-hybrid? is this a known issue

When you call this.props.transition.router.stateService.reload(true), if the current state is a React component, the component is not "reloaded"; by that, I mean it does not unmount and remount the react component.

I've also tried the other approach of using transitionTo(..., null, {reload:true, notify:true}).

Maybe I'm missing something?

I've attempted to set up react-hybrid in my Angular app while we migrate to React, following the Read.me and the example app. I'm using React 16.3.2, and it's unclear if it is compatible with the current version of react-hybrid or setup is wrong.

Setup looks something like this in app.js:
import { UI_ROUTER_REACT_HYBRID } from '@uirouter/react-hybrid';

angular.module('app', [ ... UI_ROUTER_REACT_HYBRID, ... ])

Then immediately get the following errors (edited for brevity, but I can post additional error information if necessary):

Warning: The <UIView /> component appears to have a render method, but doesn't extend React.Component. This is likely to cause errors. Change UIView to extend React.Component instead.

warning.js:33 Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.
Check the render method of 'ReactUIView'. in UIView (created by ReactUIView) in UIRouterContextComponent (created by ReactUIView) in ReactUIView

Warning: Failed prop type: The prop 'router' is marked as required in 'View', but its value is 'undefined'. in View in UIView (created by ReactUIView) in UIRouterContextComponent (created by ReactUIView) in ReactUIView

Uncaught Error: UIRouter instance is undefined. Did you forget to include the <UIRouter> as root component?

The above error occurred in the <View> component: in View in UIView (created by ReactUIView) in UIRouterContextComponent (created by ReactUIView) in ReactUIView
Consider adding an error boundary to your tree to customize error handling behavior.

Hello guys!

I am new to Apollo client and I can see they use the *Provider pattern to activate Apollo for any React component in the tree. It's similar to how Redux is used.
However we have a hybrid AngularJS/ReactJS app and use your amazing router to be able to move to React incrementally but now we don't have ReactDOM.render() where I can add the ApolloProvider component and I wonder if we can still use Apollo with our configuration?

Thank you in advance for any hints! 👍

PS: if you suggest using another graphQL client instead of Apollo I will be happy to investigate it.

Thanks for making this great module!  🙏

Is there any plans for supporting the latest version of React?https://reactjs.org/blog/2019/08/08/react-v16.9.0.html

I'm getting this error now when upgrading React from 16.8.6 and I think it's related to this module.

First of all I'd like to thank you for this project, I can see this being very useful for a lot of people maintaining AngularJS projects. I have a question about nesting states, I'm trying to do something like this:

`$stateProvider.state('app', {
url: '/app',
templateUrl: 'layout/page',
controller: 'AppContainerController'
});

$stateProvider.state('app.hello', {
url: '/hello',
component: Hello
});`

Where Hello is a react component, but navigation to '/app/hello' doesn't load the React component to the UI-view. Is this use case not supported?

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Hi! Thanks you for a great tool. Now I'm tring to migrate our product to react and this lib looks very useful to me.
I made a simple demo and it works perfectly, but I have a strange problem in my working project.
I replace current endpoint with code from demo

import angular, { ILocationProvider } from 'angular';
import { UI_ROUTER_REACT_HYBRID } from '@uirouter/react-hybrid';

import { Report } from './report';
import { ReportComponent } from './report.component';

const ngmod = angular
  .module('app', [UI_ROUTER_REACT_HYBRID])
  .config([
    '$locationProvider',
    '$stateProvider',
    ($locationProvider: ILocationProvider, $stateProvider: any) => {
      $locationProvider.html5Mode({ enabled: true });
      $stateProvider.state({
          name: 'react',
          url: '/react2',
          //template: '<h1>Other</h1>',
          //component: 'myReport',
          component: Report,
    });
    }
  ])
  .component('myReport', ReportComponent)
  .name;

angular.element(document).ready(() => {
  angular.bootstrap(document.documentElement, [ngmod]);
});

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

I dread putting this up as an issue as it's not a problem directly, however I am in a unique situation.
The project I got pulled into is setup with both AngularJS (1.5) and Angular 7.
However, we are now wanting to put up some new React based pieces to the puzzle.
I need a UIRouter Solution which can handle all 3.

Is there a way to use the React Hybrid to be the router of record and have it handle:
ReactJS
AngularJS
Angular7
?

Hi there,

I'm working on a Angular 1 project. Recently I migrated from angular-ui-router to @ui-router using the guide https://ui-router.github.io/guide/ng1/migrate-to-1_0

Rather than migrate fully to the new transitions hook model, I used the polyfill to keep the $stateChangeStart events. After following the guide and fixing a couple of breaking changes, the app is working as before.

I'm now trying to route directly to a React component and I'm not having any luck. The error I'm seeing is

Error: [$injector:unpr] Unknown provider: function TestComponent() {
    _classCallCheck(this, TestComponent); 
    
    return _possibleConstructorReturn(this, _getPrototypeOf(TestComponent).apply(this, arguments));
  }DirectiveProvider <- function TestComponent() {
    _classCallCheck(this, TestComponent);

    return _possibleConstructorReturn(this, _getPrototypeOf(TestComponent).apply(this, arguments));
}

Import { UI_ROUTER_REACT_HYBRID } from '@uirouter/react-hybrid';
import TestComponent from './TestComponent'

const moduleName = module.exports = 'module.name.here'

angular
  .module(moduleName, [
    'ui.router',
    UI_ROUTER_REACT_HYBRID,
  ])
  .config(function($stateProvider) {
    
    $stateProvider
    .state('main.something', {
      url: '/something',
      abstract: true,
      views: {
        '': {
          template: '<ui-view></ui-view>',
        },
      }
    })
    .state('main.something.overview', {
      url: '',
      $type: "react", // tried this without it
      component: TestComponent
    })
  })

import React, { Component } from 'react'

class TestComponent extends Component {
  render() {
    return (
      <div>
        <h1>Hello from react class component</h1>
      </div>
    )
  }
}

Cool project, I'd like to use it in my own application, but we use the default content feature of ui-view pretty heavily.
It would be nice if default content was already being populated in a ui-view, that it would remain there instead of being replaced by the react-ui-view-adapter (https://github.com/ui-router/react-hybrid/blob/master/src/angularjs/ReactUIViewAdapterComponent.tsx#L18)

Any ideas?

@uirouter/react and @uirouter/angularjs are included directly in this project. However, if one of these libraries are included in the package.json of the app, this causes a clash because all the globals (for example location services, $q, etc.) will not be populated.

While working with future states we are consistently seeing an issue when first try to redirect to the view in a future state (e.g. with a $state.go) results in no redirect and an error stack trace provided bellow. However, the second try always results in successful redirect. Network tab also shows that the module is being successfully loaded on the first try.

Using a direct url of the state in an anchor's tag href seems to be the workaround, but I was wondering if this was something that could be fixed by either changing the way we work with the react-hybrid or by changing library code.

I was going through the logic and got to this point

on the second try definition is present

I would really appreciate help with this and let me know if there is anything I could do to help investigate this better. Thanks!

angular.js:13424 Error: Could not resolve '[object Object]' from state 'app.project'
at new Transition (webpack:///./node_modules/@uirouter/core/lib-esm/transition/transition.js?:79:19)
at TransitionService.create (webpack:///./node_modules/@uirouter/core/lib-esm/transition/transitionService.js?:174:16)
at Transition.redirect (webpack:///./node_modules/@uirouter/core/lib-esm/transition/transition.js?:492:59)
at eval (webpack:///./node_modules/@uirouter/core/lib-esm/state/stateService.js?:370:42)
at processQueue (webpack:///./node_modules/angular/angular.js?:15757:28)
at eval (webpack:///./node_modules/angular/angular.js?:15773:27)
at Scope.$eval (webpack:///./node_modules/angular/angular.js?:17025:28)
at Scope.$digest (webpack:///./node_modules/angular/angular.js?:16841:31)
at eval (webpack:///./node_modules/angular/angular.js?:17064:26)
at completeOutstandingRequest (webpack:///./node_modules/angular/angular.js?:5824:10

I'm migrating an AngularJS application and replacing pieces with React components. These components have UISref links within the application and include parameters. The values of these parameters never seems to feed through to the deeper context though.

I've created a simpler test case of the issue:
https://stackblitz.com/edit/ui-router-react-hybrid-objparam

The routes at the top all set two params and they seem to work, but this is from an AngularJS context. If you choose one of the react states and then click one of the links further down the page, the parameters there never feed through and only null shows up.

I'm unable to get the name views to work on child states. From what I see, it looks like name property declared on my UIView(s) does not get passed down to the react-ui-view-adapter; it instead gets the default name ($default). I'm assuming this is why ui router is unable to render the view components.

package.json

    "@uirouter/react": "0.6.2",
    "@uirouter/react-hybrid": "0.1.0",

{
        name: 'app.audit',
        url: '/audit',
        component: AuditPage
       // UIViews are declared here
},
{
        name: 'app.audit.orders',
        url: '/order',
        views: {
            '[email protected]': FiltersComponent,
            '[email protected]': GridComponent
        }
}

{
        name: 'app.audit',
        url: '/audit',
        component: AuditPage
       // UIViews are declared here
},
{
        name: 'app.audit.orders',
        url: '/order',
        views: {
            'filters@^': FiltersComponent,
            'grid@^': GridComponent
        }
}

<UIView name='filters'/>

<UIView name='grid'/>

<react-ui-view-adapter name="$default" class="ng-scope">
    <form class="space-bottom-2">

         <!-- other form components go here... -->
         <ui-view name="filters" class="inline-view ng-scope">
             <!-- uiView: -->
             <ui-view class="ng-scope">
                 <react-ui-view-adapter name="$default" class="ng-scope">
                     <div></div>
                 </react-ui-view-adapter>
             </ui-view>
         </ui-view>

        <div class="true-grid-12 space-top-2">
            <button class="btn btn-primary" type="submit">Search</button>
            <button class="btn btn-link" type="button">Reset</button>
        </div>

    </form>

    <ui-view name="grid">
        <!-- uiView: -->
        <ui-view class="ng-scope">
            <react-ui-view-adapter name="$default" class="ng-scope">
                <div></div>
            </react-ui-view-adapter>
        </ui-view>
    </ui-view>

</react-ui-view-adapter>

Accessing PropTypes via the main React package is deprecated, and will be removed in React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see https://fb.me/prop-types-docs

when using this package.

Stackblitz:
https://stackblitz.com/edit/ui-router-react-hybrid-vgg4fy?file=ReactComponent.js
click on "react"

PR demonstrates issue
#32

https://github.com/ui-router/react-hybrid/blob/master/src/decorateUIRouterViewConfigs.ts#L34

.state('account.view.list', {
        url: '/list?new&updated&sortBy',
        title: title,
        views: {
          'sub_header@': accountRoutesHelperServiceProvider.getAccountDetails(),
          '': {templateUrl: 'someTemplate.html'}

 const view = views[key];
      const selfView = selfViews[key];

     // Relatively targets the unnamed view in this state's parent state, 'contacts'.		
        // <div ui-view/> within contacts.html		
        "" : { }, 		

I am using React 16.4.0, Angular 1.6.9, @uirouter/react-hybrid 0.3.4 and ngReact 0.5.1. I have removed angular-ui-router as a dependency. I'm getting the error:

angular.js:14800 Error: [$injector:unpr] Unknown provider: function () {
  return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
    'div',
    null,
    'test'
  );
}DirectiveProvider <- function () {
  return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(
    'div',
    null,
    'test'
  );
}Directive

// TestComponent.jsx
import React from 'react';

export default () => <div>test</div>;

import TestComponent from './TestComponent';

$stateProvider.state({
  name: 'testView',
  url: 'test',
  component: TestComponent,
});

import { UI_ROUTER_REACT_HYBRID } from '@uirouter/react-hybrid';

angular.module('shared', [
  'ui.router',
  UI_ROUTER_REACT_HYBRID
]);

Can you please provide an example for 0.2.0 implementation? ; )

I am trying to route from react component and implemented as the way mentioned in
#28

It does work for normal state without params in url, however it seems doesn't work for the url with params. Console was showing the error of stateService.js:41 Transition Rejection($id: 2 type: 6, message: The transition errored, detail: Error: Transition Rejection($id: 1 type: 4, message: This transition is invalid, detail: The following parameter values are not valid for state 'contact-detail': [id:"undefined"])) Here's how i implemented

Define state

$stateProvider
  .state('contact', {
     url: '/contacts/:id',
     template: "<contact-detail></contact-detail>"
  })

  <UIRouterContextComponent>
    <div>
      <UISref to={'contact'} params={{id: 1234}}>
        <a>hello world</a>
      </UISref>
    </div>
  </UIRouterContextComponent>

I put 'onEnter' in the state definition and register the state by 'UIRouter.stateRegistry.register(state)'.

We can try this in the 'react-hybrid/example/src/index.js'.
This won't work:
{
name: 'react', url: '/react', component: ReactComponent,
onEnter: (trans, state) => {
console.log(state.name);
}
},
index.js:1 Error: [$injector:unpr] Unknown provider: transProvider <- trans
(It seems like the code will put assume it's a provider named by 'argument+Provider').

This will work:
onEnter: ($transition$, $state$) => {
},

This issue only happens in 'react-hybrid', not in 'ui-router/react'.

When using this library with Redux I'm getting the error 'Error: Could not find "store" in either the context or props'. Is it possible to send the redux store to the router in some way?

I followed the directions in the guide to set up react-hybrid, but when going to the page with the React component, i get the below error. Am I missing something? There's a <ui-view> tag in the DOM, but no <react-ui-view-adapter> or <UIView>

Error: [$injector:unpr] Unknown provider: [object Module]DirectiveProvider <- [object Module]Directive
https://errors.angularjs.org/1.7.8/$injector/unpr?p0=%5Bobject%20Module%5DDirectiveProvider%20%3C-%20%5Bobject%20Module%5DDirective
    at angular.js:138:1
    at angular.js:4924:1
    at Object.getService [as get] (angular.js:5084:1)
    at angular.js:4929:1
    at Object.getService [as get] (angular.js:5084:1)
    at getComponentBindings (templateFactory.js:177:27)
    at TemplateFactory../node_modules/@uirouter/angularjs/lib-esm/templateFactory.js.TemplateFactory.makeComponentTemplate (templateFactory.js:168:1)
    at Ng1ViewConfig.getTemplate (views.js:75:1)
    at Object.<anonymous> (viewDirective.js:311:1)
    at angular.js:1388:1 '<ui-view class="ng-scope">'

"angular": "1.7.8",
"@uirouter/react-hybrid": "^1.0.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0"

var UI_ROUTER_REACT_HYBRID = require('@uirouter/react-hybrid').UI_ROUTER_REACT_HYBRID;

angular.module('app', [
    'config',
    'ui.router',
    'ui.router.state.events',
    ...
    UI_ROUTER_REACT_HYBRID
]);

var Activity = require('../../../react/activity.root');

angular.module('app').config(settingsConfig);

settingsConfig.$inject = ['$stateProvider'];

function settingsConfig($stateProvider) {
    $stateProvider
     .state('app.settings', {
            abstract: true,
            template: '<ui-view/>'
        })
    .state('app.settings.activity', {
            url: '/settings/activity',
            component: Activity,
            data: {
                pageTitle: 'Activity'
            }
        })
}

import React from 'react';

const Root = () => {
    return <div>This is the activity page</div>;
};
export default Root;

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?

Hello!
The Readme says React 16.3 is required, but the peer dependencies show React 15.
I suggest to update it to React 16.3 to be more in-sync with the Readme.

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

The UIView viewport is not getting populated with child state.

The parent is structured like this:

<UIRouterContextComponent>
   <div>Some content</div>
   <UIView>Default content</UIView>
</UIRouterContextComponent>

Since ReactDOM.render is no longer supported in React 18, any plan to upgrade this lib?

thank you

while installing this package together with React 16.x the error above occurs. looks like validation should include newer React versions too.