Error when routing Angular 4 components into nested AngularJS ui-views about angular-hybrid

[mischkl]

@christopherthielen any chance you have an idea what the problem could be? Could it be that we need to restructure our ui-views to accomodate the hybrid routing? We'd be very thankful for any assistance!

[httpete]

@claudiuconstantin do you think these limitations of routing ng 1.x views into a 2 + view will ever be lifted and supported?

[claudiuconstantin]

Check out Limitations, maybe you can find something useful there:

We currently support routing either Angular (2+) or AngularJS (1.x) components into an AngularJS (1.x) ui-view. However, we do not support routing AngularJS (1.x) components into an Angular (2+) ui-view.

If you create an Angular (2+) ui-view, then any nested ui-view must also be Angular (2+). Because of this, apps should be migrated starting from leaf states/views and work up towards the root state/view

[mischkl]

@claudiuconstantin all of our ui-views are defined in Angular 1... at no point are we attempting to route an Angular 1 component into an Angular 2 ui view

[princetoncollins]

@mischkl Did you ever get this working? I'm am also currently migrating an Angular.js app using ui-router to Angular 2+ and would like to support nested ui-views.

[princetoncollins]

@claudiuconstantin I think I may be in the same boat as @mischkl. However it's not clear to me if the limitations of @uirouter/angular-hybrid also include Angular 2 components that have been downgraded.

For example... in my Angular.js app I've created some Angular 2 components that have been downgraded. I'm routing to these downgraded components using Angular.js ui-router(via angular-hybrid). If one of these downgraded components I'm routing to has it's own <div ui-view></div> in it's template, will this ui-view not be supported?

[christopherthielen]

It's been a long time since I've looked at this stuff. I think if you're only routing a downgraded ng2 component into an ng1 ui-view then you may not need the angular-hybrid module. IIRC, nested ng1 ui-view should work fine even if there is a downgraded ng2
component in the middle.

[princetoncollins]

@christopherthielen Thanks for the quick reply. So, I've been able to route to an downgraded ng2 component in an ng1 ui-view okay.

However, if the downgraded ng2 component itself has another ui-view in it, I can't seem to target it in order to display other content.

Example below:

<div class="width-100">
  <!-- uiView: -->
  <div ui-view="" class="ng-scope"> // Root UI-View here
    <engagement-app class="ng-scope" ng-version="8.2.14"> // The downgraded ng2 component.
       <ui-view> // The downgraded ng2 component's ui-view.
          <!---->
          <!--bindings={
              "ng-reflect-ng-if": "true"
           }-->
          <!---->
       </ui-view>
    </engagement-app>
  </div>
</div>

The inner ui-view which I previously named "main", with the intention of targeting it by name, is the one I'm trying to render content inside. I don't know if this is possible, mainly because the <engagement-app> component is a downgraded ng2 component, and so the it's nested ui-view won't work with the ng1 state config?

@christopherthielen I'd appreciate your insight concerning this, and I apologize that this a very old issue. Just wondering if what I'm attempting to accomplish is possible.

And if if I need @ui-router/angular-hybrid to do it.

[christopherthielen]

oh so the downgraded component engagement-app has an ng2 template which contains <ui-view>?

That will never render an AngularJS <ui-view> because Angular templates render Angular components.
You could possibly create an AngularJS component that renders an AngularJS <ui-view> and then upgrade that to ng2.

// upgrade this component to ng2
angularjsmodule.component('uiViewWrapper', {
  template: '<ui-view></ui-view>'
});

<div class="width-100">
  <!-- uiView: -->
  <div ui-view="" class="ng-scope"> // Root AngularJS UI-View here
    <engagement-app class="ng-scope" ng-version="8.2.14"> // The downgraded ng2 component.
      <ui-view-wrapper> // The upgraded-to-ng2 AngularJS component which renders an AngularJS ui-view.
       <ui-view> 
       </ui-view>
      </ui-view-wrapper>
    </engagement-app>
  </div>
</div>

FWIW, all the uirouter hybrid projects assume each view rendered from one component framework will render a ui-view using that same component framework. Basically migrate views from the leafs up towards the root. What you're doing is violating that assumption, but you may be able to use the above workaround. Warning: there be dragons here.

[princetoncollins]

@christopherthielen Thanks for the info. I do my best to steer clear of dragons, if I can. I ended up changing the <ui-view/> in the downgraded ng2 component, <engagement-app /> , to a <router-outlet></router-outlet>.

Breaking it down, I have,
My root ng1 <ui-view/> rendering the downgraded ng2 component, <engagement-app/>.
...and the <engagement-app/> only renders a <router-outlet></router-outlet> which is where I want to render other ng2 components.

<div class="width-100">
  <!-- uiView: -->
  <div ui-view="" class="ng-scope"> // Root AngularJS UI-View here
    <engagement-app class="ng-scope" ng-version="8.2.14"> // The downgraded ng2 component.
      <router-outlet></router-outlet>
    </engagement-app>
  </div>
</div>

Currently the router-outlet is not working. I get the <engagement-app/>, and I can see the <router-outlet/> inside of it, but nothing rendered inside of that router-outlet. I'm not getting any errors either, I should also mention the ng2 components I want to render in the are currently still downgraded. Would that be a problem?

[christopherthielen]

Sounds like you're now mixing ui-router and the Angular Router. I know that's a thing people have done before, but I don't know the details. If you search, I'm sure you'll find some blogs that explain how to mix those two technologies. Sorry, I really can't be of much help when it comes to the Angular Router as I've never used it.

[mischkl]

@mischkl Did you ever get this working? I'm am also currently migrating an Angular.js app using ui-router to Angular 2+ and would like to support nested ui-views.

As mentioned, we simply had to stick with the "solution" of not using the hybrid router and downgrading all routable Angular components to AngularJS. Eventually we got fed up and moved towards a gradual migration strategy to the Angular router (keeping strictly separated routes depending on the feature area and technology), after having migrated most components. Obviously more work in the short term but in the end run it seems better maintained and documented than ui-router.

[stale]

This issue has been automatically marked as stale because it has not had
recent activity. It will be closed if no further activity occurs.
This does not mean that the issue is invalid. Valid issues
may be reopened.
Thank you for your contributions.