ui-router / react-hybrid Goto Github PK
View Code? Open in Web Editor NEWHybrid adapter for routing to AngularJS and React components
License: MIT License
Hybrid adapter for routing to AngularJS and React components
License: MIT License
Stackblitz:
https://stackblitz.com/edit/ui-router-react-hybrid-vgg4fy?file=ReactComponent.js
click on "react"
PR demonstrates issue
#32
@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.
🚨 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
?
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
🚨 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.
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'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",
My route/state declarations:
{
name: 'app.audit',
url: '/audit',
component: AuditPage
// UIViews are declared here
},
{
name: 'app.audit.orders',
url: '/order',
views: {
'[email protected]': FiltersComponent,
'[email protected]': GridComponent
}
}
I've also tried this:
{
name: 'app.audit',
url: '/audit',
component: AuditPage
// UIViews are declared here
},
{
name: 'app.audit.orders',
url: '/order',
views: {
'filters@^': FiltersComponent,
'grid@^': GridComponent
}
}
UIView(s) in app.audit:
<UIView name='filters'/>
<UIView name='grid'/>
This is what the page component (AuditPage) looks like when rendered:
<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>
Please let me know if you need any more info.
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.
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>
The default content text shows up but the child state is not visible.
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">'
package.js
"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"
app.js
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
]);
routes
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'
}
})
}
component
import React from 'react';
const Root = () => {
return <div>This is the activity page</div>;
};
export default Root;
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));
}
The ui-router config for the part of the app where I'm trying to route to a React component is:
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
})
})
The React component is
import React, { Component } from 'react'
class TestComponent extends Component {
render() {
return (
<div>
<h1>Hello from react class component</h1>
</div>
)
}
}
My package.json has the following dependencies:
"angular": "1.5.9",
"@uirouter/react-hybrid": "^1.0.2"
I believe this is definitely something I'm doing wrong. Any help is appreciated.
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
My React component:
// TestComponent.jsx
import React from 'react';
export default () => <div>test</div>;
My router:
import TestComponent from './TestComponent';
$stateProvider.state({
name: 'testView',
url: 'test',
component: TestComponent,
});
My modules file:
import { UI_ROUTER_REACT_HYBRID } from '@uirouter/react-hybrid';
angular.module('shared', [
'ui.router',
UI_ROUTER_REACT_HYBRID
]);
Any thoughts on how to resolve this error? Thank you!
while installing this package together with React 16.x the error above occurs. looks like validation should include newer React versions too.
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]);
});
Looks like it happens because in file 'reactViews.js' imported variable "services" has undefined links to $q and $injector but in my demo project they have correct values.
Maybe you can help me.
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
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.
Since ReactDOM.render is no longer supported in React 18, any plan to upgrade this lib?
thank you
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?
Can you please provide an example for 0.2.0 implementation? ; )
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.
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.
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];
In views, it gets defined as '$default', but selfViews define it as ''; what is the expected behavior here?
Is the state definition wrong: should I update it to '$default'?
===
From https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views:
// Relatively targets the unnamed view in this state's parent state, 'contacts'.
// <div ui-view/> within contacts.html
"" : { },
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: (
},
This issue only happens in 'react-hybrid', not in 'ui-router/react'.
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.
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.
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>"
})
in react component
<UIRouterContextComponent>
<div>
<UISref to={'contact'} params={{id: 1234}}>
<a>hello world</a>
</UISref>
</div>
</UIRouterContextComponent>
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.
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?
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?
🚨 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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.