ui-sref-active lazy

app.js

import { default as stateMachine } from './stateMachine';

var internalDeps   = [ ];
var thirdPartyDeps = [ 'ui.router', 'oc.lazyLoad' ];

function config ($locationProvider, $stateProvider) {
  $stateProvider.state('root', {
    url: '',
    abstract: true,
  });

  $locationProvider.html5Mode({
    enabled:     true,
    requireBase: false
  });
}

export default angular
  .module('app', internalDeps.concat(thirdPartyDeps))
  .config(config)
  .config(stateMachine(angular.module('app')));

bootstrap.js

import 'angular';
import 'angular-ui-router';
import 'ui-router-extras';
import 'npm:[email protected]';

import { default as app } from './app';

angular.bootstrap(document, [ app.name ]);

home.mod.js

function HomeController () {
  this.name = 'kasper';
}

function config ($stateProvider) {
  $stateProvider.state('root.home', {
    url: '/',
    controller: 'HomeController',
    controllerAs: 'home',
    templateUrl: 'app/components/home/home.html'
  });
}

export default angular
  .module('app.home', ['ui.router'])
  .config(config)
  .controller('HomeController', HomeController);

modifiedUiSrefActive.js

$StateRefActiveDirective.$inject = ['$state', '$stateParams', '$interpolate'];
function $StateRefActiveDirective($state, $stateParams, $interpolate) {
  return {
    restrict: "A",
    controller: ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
      var state,
          params,
          activeClass;
      activeClass = $interpolate($attrs.uiSrefActiveEq || $attrs.uiSrefActive || '', false)($scope);
      this.$$setStateInfo = function(newState, newParams) {
        state = $state.get(newState, stateContext($element));
        params = newParams;
        update();
      };
      $scope.$on('$stateChangeSuccess', update);
      function update() {
        if (isMatch()) {
          $element.addClass(activeClass);
        } else {
          $element.removeClass(activeClass);
        }
      }
      function isMatch() {
        if (!state) {
          state = $state.get(parseStateRef($attrs.uiSref).state, stateContext($element));
        }

        if (typeof $attrs.uiSrefActiveEq !== 'undefined') {
          return state && $state.is(state.name, params);
        } else {
          return state && $state.includes(state.name, params);
        }
      }
    }]
  };
}

roster.mod.js

function RosterController (players) {
  this.players = players;
}

function config ($stateProvider) {
  $stateProvider.state('root.roster', {
    url: '/roster',
    controller: 'RosterController',
    controllerAs: 'roster',
    templateUrl: 'app/components/roster/roster.html',
  });
}

export default angular
  .module('app.roster', ['ui.router'])
  .config(config)
  .controller('RosterController', RosterController);

stateMachine.js

import states from './states.json!';

function stateMachine (module) {
  module.requires.push('ct.ui.router.extras.core');
  module.requires.push('ct.ui.router.extras.future');

  function stateConfig ($futureStateProvider) {
    $futureStateProvider.stateFactory('custom', function ($q, $ocLazyLoad, futureState) {
      var deferred = $q.defer();

      System.import(futureState.src).then(function (mod) {
        $ocLazyLoad.load(mod.default).then(function () {
          deferred.resolve();
        });
      });

      return deferred.promise;
    });

    states.forEach(function (state) {
      $futureStateProvider.futureState(state);
    });
  }

  return stateConfig;
}

export default stateMachine;

states.json

[
  {
    "stateName": "root.home",
    "url":       "/",
    "type":      "custom",
    "src":       "app/components/home/home.mod"
  },
  {
    "stateName": "root.roster",
    "url":       "/roster",
    "type":      "custom",
    "src":       "app/components/roster/roster.mod"
  }
]

Modifications made to the ui-router source on line 24 through line 26 in the ui sref active directive