SystemJS

Short example

The simplest way you can use SystemJS and ocLazyLoad together is with the System.import API:

import {coreStates} from 'js/core/states/app'

// Optionally, return to wherever this promise chain might be useful
System.import('js/core/states/app').then(function(m) {
  return $ocLazyLoad.load(m.coreStates);
}).then(function() {
  return Startup.awake();
})

Where coreStates might look something like this:

export var coreStates = angular.module( 'core.states');

Long example

The lazy module that we would like to load on demand could look something like this.

var secondModule = angular.module('secondModule', []);

secondModule.run(function () {
  console.log('secondModule::run');
});

export default secondModule;

In this case we are exporting default, which will come into play once we attempt to lazily load the module.

var thirdModule = angular.module('thirdModule', []);

thirdModule.run(function () {
  console.log('thirdModule::run');
});

export { thirdModule };

Here we're defining another module without the default export, which will yet again - come into play once we attempt to lazy load.

function lazySystem ($ocLazyLoad) {
  function load (src, key) {
    return System.import(src).then(function (loadedFile) {
      return $ocLazyLoad.load(loadedFile[key || 'default']);
    });
  }
  
  this.load = load;
}

var loaderModule = angular
    .module('loaderModule', ['oc.lazyLoad'])
  .service('lazySystem', lazySystem);

export { loaderModule };

Container module for the lazySystem service hosting our .load method. Runs System.import with the passed in source file and passes its response to $ocLazyLoad.load()

By passing a key to the .load() method we can target a specific export of the loaded source file, and if no key was passed we will target the default export.

$ocLazyLoad will then return a promise with the loaded module.

import { loaderModule } from './loaderModule'; 

var app = angular.module('app', [ loaderModule.name ]);

app.run(function (lazySystem) {
  lazySystem.load('./secondModule').then(function (loadedModule) {
    console.log(loadedModule);
  });

  lazySystem.load('./thirdModule', 'thirdModule').then(function (loadedModule) {
    console.log(loadedModule);
  });
});

Our main file, containing our base application, imports the loaderModule and during the run phase we lazily load the secondModule and thirdModule - logging out their respective results.