Ui-router V1 component-routing

[alo]

Hi!

I'm trying to use ui.router(@version v1.0.0-beta.1) with component routed and oc.lazyLoad(@version v1.0.9)

WORK'S FINE

  angular.module('app').config(
    ['$stateProvider',
    function ($stateProvider) {

      $stateProvider
        .state('app.sessions', {
          url: '/sessions', 
          template: '<sessions-comp></sessions-comp>', //this is the difference 
          resolve: {
            store: function ($ocLazyLoad) {
              return $ocLazyLoad.load(
                {
                  name: "sessions",
                  files: ["app/dev/sessions/sessions.js",
                    "app/dev/sessions/sessions/sessions.component.js",
                    "app/dev/sessions/shared/sessions.service.js",
                    "app/dev/sessions/shared/sessions-list/sessions-list.component.js"]
                }
              );
            }
          }
        });
      }
    ]
    );

NOT WORKING

  angular.module('app').config(
    ['$stateProvider',
    function ($stateProvider) {

      $stateProvider
        .state('app.sessions', {
          url: '/sessions', 
          component: 'sessionsComp', //this is the difference 
          resolve: {
            store: function ($ocLazyLoad) {
              return $ocLazyLoad.load(
                {
                  name: "sessions",
                  files: ["app/dev/sessions/sessions.js",
                    "app/dev/sessions/sessions/sessions.component.js",
                    "app/dev/sessions/shared/sessions.service.js",
                    "app/dev/sessions/shared/sessions-list/sessions-list.component.js"]
                }
              );
            }
          }
        });
      }
    ]
    );

Does anyone know any solution?

Thanks!

[kination]

@alo where did you define sessionsComp? Is it an html form?

[alo]

This is the definition of the component(In that case is a list of elements):

app/dev/sessions/sessions/sessions.component.js

angular
    .module('sessions')
    .component('sessionsComp', {
      templateUrl: 'app/dev/sessions/sessions/sessions.component.html',
      controller: SessionsComponentController,
      bindings: {
        sessions: '<',
      },
    });

  SessionsComponentController.$injection = [ 'SessionsService' ];
  function SessionsComponentController( SessionsService ){
    var vm = this;

    vm.$onInit = function(){
      vm.sessions = vm.sessions.data;
    };

  }

app/dev/sessions/sessions/sessions.component.html

<div class="wrapper-md col-md-12">
  <div class="card">
    <div layout-="column">
      <md-content layout-padding>
        <div layout="row">
          <cdy-sessions-list cdy-sessions="$ctrl.sessions"></cdy-sessions-list>
        </div>
      </md-content>
    </div>
  </div>
</div>

Thanks

[alo]

@djKooks I've write this repo if you want to test https://github.com/alo/oclazyload-uirouter-component-routing-tests

Thanks

[alo]

Resolved and explained here: https://github.com/angular-ui/ui-router/issues/3102#issuecomment-255422835