Coder Social home page Coder Social logo

react-hybrid's Introduction

UI-Router react-hybrid

UI-Router support for Hybrid Angular/React apps

This package enables UI-Router to route to both AngularJS components (and/or templates) and React components. Your app will be hosted by AngularJS while you incrementally migrate to React.

import { ReactAboutComponent } from "./about.component";

/// ...

$stateProvider.state({
  name: 'home', 
  url: '/home',
  component: 'ng1HomeComponent' // AngularJS component or directive name
})

.state({
  name: 'about', 
  url: '/about',
  component: ReactAboutComponent // React component class reference
});

.state({
  name: 'other',
  url: '/other',
  template: '<h1>Other</h1>', // AngularJS template/controller
  controller: function($scope) { /* do stuff */ }
})

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

When routing to an AngularJS component or template, that component uses the standard AngularJS directives (ui-view, ui-sref, ui-sref-active) from @uirouter/angularjs.

Getting started

Remove angular-ui-router (or @uirouter/angularjs) from your package.json and replace it with @uirouter/react-hybrid. Add the react and react-dom dependencies.

dependencies: {
  ...
  "angular": "^1.6.0",
  "react": "^15.4.0",
  "react-dom": "^15.4.0",
   ...
  "@uirouter/react-hybrid": "^0.0.8",
  ...
}

Add AngularJS module for hybrid support

import { UI_ROUTER_REACT_HYBRID } from '@uirouter/react-hybrid';
let ng1module = angular.module("myApp", ['ui.router', UI_ROUTER_REACT_HYBRID]);

Route to AngularJS components/templates

Your existing AngularJS routes work the same as before.

var foo = { 
  name: 'foo',
  url: '/foo',
  component: 'fooComponent'
};
$stateProvider.state(foo);

var bar = { 
  name: 'foo.bar',
  url: '/bar',
  templateUrl: '/bar.html',
  controller: 'BarController'
};
$stateProvider.state(bar);

Route to React components

Use component: in your state declaration.

var leaf = { 
  name: 'foo.bar.leaf',
  url: '/leaf',
  component: MyReactComponentClass
};
$stateProvider.state(leaf);

How it works

React and AngularJS ui-views

An AngularJS <ui-view> can have default content. This default content is rendered when no state is filling the ui-view with a component. For example, a parent state may render a ui-view portal, but want Default Content to display when no child state is active: <ui-view>Default Content</ui-view>.

The @uirouter/react-hybrid project sets the default content to an adapter component, <react-ui-view-adapter>. The react-ui-view-adapter then renders a React <UIView/>.

When a state loads an AngularJS view into the AngularJS <ui-view>, it replaces the react-ui-view-adapter default content.

When a state loads a React Component into the React <UIView/> component, it is nested inside the AngularJS components like so:

<ui-view> // angularjs
  <react-ui-view-adapter> // angularjs
    <UIView> // react
      <RoutedReactComponent/> //react
    </UIView>
  </react-ui-view-adapter>
</ui-view>

Providing "context" to children

In AngularJS, each <ui-view> provides the state context to its children elements, such as ui-sref or ui-view. The state context allows a ui-sref to use relative links, for example. AngularJS provides this context by setting hidden data on its DOM element, using angular.element(el).data('$uiView'). Any nested ui-view or ui-sref fetches the context by asking for angular.element(childel).inheritedData('$uiView').

In React, each UIView provides the state context to its children elements using React context. The nested UIView or UISref fetches the state context using the React context API.

There is some glue provided by @uirouter/react-hybrid which bridges these two context mechanisms. When a React UIView component is rendered, it is wrapped in a UIRouterReactContext component. The component finds the state context by looking first via React props, and second via AngularJS DOM data. It then provides the state context to its children using React props.

The <react-ui-view-adapter> wraps a React UIView component. When the react UIView is filled by a state's react component, the react-ui-view-adapter gets the state context for the newly filled UIView. It then provides that context to AngularJS components using AngularJS DOM data.

react-hybrid's People

Contributors

dependabot-preview[bot] avatar christopherthielen avatar dependabot[bot] avatar uirouterbot avatar jutaz avatar pahen avatar alanmquach avatar Anber avatar josephlin55555 avatar pavloko avatar

Stargazers

Cameron Lewis avatar  avatar Kangjie avatar David López Pérez avatar Joshua Bence avatar Michael Zalla avatar Clément Creusat avatar Sheehan Toufiq Khan avatar Marushkevych avatar  avatar Eyal Lapid avatar Elior Boukhobza avatar Marian Ondrasak avatar Alberto avatar Sergey Grankin avatar Benjamin Schandera avatar manfye avatar  avatar jerry avatar Josh | Dev #3635 avatar Jean-Baptiste Musso avatar Leif Gensert avatar Carlos Francisco Franco Roque avatar x0rzkov avatar Maziar Barzi avatar  avatar Gianni Moschini avatar Mathias Gheno Azzolini avatar  avatar David avatar Laurent avatar Luca Anceschi avatar 林昊 avatar Evan avatar Ye Jiaqi avatar Tushar Narkhede avatar Adam Jang avatar Jens Vanderhaeghe avatar Nick Breaton avatar Jeff Gnatek avatar  avatar Rodrigo De Presbiteris avatar Divyang Panchasara avatar Jesse Wang avatar Robert Cooper avatar GAURAV avatar Douglas Zaltron avatar Fernando Berti avatar  avatar Mihai avatar Mohammad Faisal avatar Anton Mokrushin avatar Bartłomiej Sobczuk avatar Sebastian avatar Kate Boyd avatar Nick Qi avatar Patrik Henningsson avatar Nick Zuber avatar Garrett Weinert avatar Filip Rakowski avatar Matheus Monte avatar Jose Garza avatar  avatar Vlad Soroceanu avatar Nick avatar Anton Evzhakov avatar Nishant Singh avatar Yuri Pereira Constante avatar Frankie Yan avatar Justas Brazauskas avatar Atticus White avatar Dima Kuzmich avatar Andris Shvarcs avatar Yeeland Chen avatar Lee Matabire avatar bamtron5 avatar Michael Wagner avatar Anirudha Gohokar avatar jzk avatar ruiming avatar Aaron Lifton avatar Christian Iacullo avatar Fakiolas Marios avatar Gudjon avatar  avatar Sol Tran avatar

Watchers

James Cloos avatar Sol Tran avatar Wesley Cho avatar Marco Botto avatar  avatar

react-hybrid's Issues

Action required: Greenkeeper could not be activated 🚨

🚨 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.

No coreservices initialization

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]);
});

I've got exception
image

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.

Action required: Greenkeeper could not be activated 🚨

🚨 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.

@uirouter/react and @uirouter/angularjs should be peerDependencies

@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.

Nested views not working

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.

When creating a named child state via react / UIView, name property does not get passed down

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: {
            '[email protected]^': FiltersComponent,
            '[email protected]^': 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.

Redux support?

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?

React directives don't work with hybrid app

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.

UIRouter, <View> errors when setting up react-hybrid

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.

Migrated to @ui-router from angular-ui-router, not able to route to React

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.

Update Peer Dependencies

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.

Action required: Greenkeeper could not be activated 🚨

🚨 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.

onEnter function arguments must be '$transition$' and '$state$' if used in state definition

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'.

Error: Could not resolve '[object Object]' from state X

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
Screenshot 2020-01-18 at 01 05 24

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

Going to react component throws "Unknown provider: DirectiveProvider <- Directive"

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;

Integrating 3 frameworks

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
?

UIView unable to render with custom parameters

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

Params not passing from react context

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.

Error: [$injector:unpr] Unknown provider

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!

Is there any plan/way in UI Router to support Angular,AngularJS,React together in a SPA

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?

Apollo Client support

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.

Nesting React state in an AngularJS state

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?

Support React v18.1?

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

thank you

Route to state with params doesn't work

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>

TypeError: Cannot read property '$type' of undefined

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: {
          '[email protected]': 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		
        "" : { }, 		

https://github.com/angular-ui/ui-router/blob/b2b906b0ad45f06ed114b0c042bdc60a176c60a8/src/statebuilders/views.ts#L56

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.