Lazyloading states with new ui-router 1.0.0-rc.1

Question

I was trying to upgrade to ui-router 1.0.0-rc.1 , in a gulp webpack setup . I am not able to figure out how to achieve loading states from server and registering future states for it .

What i am trying to acheive is have a landing parent state . And the states will be loaded from server which is an array of states like landing.<state-name> .

  $stateProvider
    .state('landing', {
      url: '/',
      abstract: true,
      component: 'landing',
    })
    .state('landing.**', {
      url: '/',
      lazyLoad: function (transition) {
        return transition.injector().get('$http').get('/getStates').then(function (result) {
          var arr = [];
          angular.forEach(result, function (state) {
              arr.push({
                name: 'landing.' + state.state_name,
                url: state.url,
                templateUrl: state.partial_path
              });
          });
          return arr;
        });
      }
    })

I can see the following in the console.

Transition #0 r0: Started  -> "Transition#0( ''{} -> 'landing.**'{"remainder":"dashboard"} )"
[Violation] Long running JavaScript task took 284ms
trace.js:192 Transition #0 r0: <- Rejected "Transition#0( ''{} -> 'landing.**'{"remainder":"dashboard"} )", reason: TransitionRejection(type: 2, message: The transition has been superseded by a different transition, detail: 'landing.**'{"remainder":"dashboard"})
trace.js:150 Transition #1 r0: Started  -> "Transition#1( ''{} -> 'landing.**'{"remainder":"dashboard"} )"
trace.js:199 Transition #1 r0: <- Success  "Transition#1( ''{} -> 'landing.**'{"remainder":"dashboard"} )", final state: landing.**
stats.js:103 Font Awesome CDN reporting has been enabled

The docs lack clarity and so , I am kind of stuck .

Any help appreciated

Answer 1

https://ui-router.github.io/ng1/docs/latest/interfaces/ng1.ng1statedeclaration.html#lazyload

It should return a LazyLoadResult. Generally, one of the lazy loaded states should have the same name as the future state. The new state will then replace the future state placeholder in the registry.

The future state should be replaced by a lazily loaded state of the same name. Load the 'landing' state lazily (load the future state eagerly).

https://ui-router.github.io/ng1/docs/latest/interfaces/state.lazyloadresult.html

If your state has a lazyLoad function, it should return a promise. If promise resolves to an object matching this interface, then the states array of StateDeclaration objects will be automatically registered.

The object returned from your promise should have a states property

$stateProvider
.state('landing.**', {
  url: '/',
  lazyLoad: function (transition) {
    let $http = transition.injector().get('$http');
    return $http.get('states.json').then(function (result) {
      var arr = [];
      angular.forEach(result.data, function (state) {
        arr.push({
          name: state.state_name,
          url: state.url,
          templateUrl: state.partial_path
        });
      });
      return { states: arr }; // should have a "states" property
    });
  }
})

states.json:

[
  { "state_name": "landing", "url": "/", "partial_path": "landing.html" },
  { "state_name": "landing.foo", "url": "foo", "partial_path": "foo.html" },
  { "state_name": "landing.bar", "url": "bar", "partial_path": "bar.html" },
  { "state_name": "landing.baz", "url": "baz", "partial_path": "baz.html" }
]

here's a working plunker: http://plnkr.co/edit/BMNp0lbqI6Qw2zeEAvs1?p=preview