A solution of lazy loading Angular 1.x modules using a mix of various technologies/tooling, including systemjs, ocLazyLoad, ui-router, ui-router-extras future state and not-required-but-great-to-have ES6/ES2015.

This demo project accompanies this blog post of mine http://jackma.com/2015/12/30/a-lazy-loading-solution-for-angular-1-x/.

Clone this repository:

git clone httpshttps://github.com/jack4it/angular-1x-lazy-load

Install all npm packages:

npm install --no-optional

Install all jspm packages:

jspm install

Run the bundle script (this is to be used in index.html):

node bundle.js

Finally launch browser-sync and browse to the examples to see the results:

gulp serve

This demo project defines in total three Angular 1.x modules. The app module as the initial loaded main app module and the other two lazy-loaded modules, namely contact and about, in their own folders

app.js: The main entry point of the app where systemjs/ocLazyLoad/future state are wired up. In other words, the lazy-loaded modules (future states) are declared here

systemLazyLoadService.js: The key of connecting systemjs and ocLazyLoad. This is registered as an Angular service and $futureStateProvider.stateFactory.

index-debug.html: An example of how to lazy load Angular 1.x modules in browser on the fly during development time

bundle.js: A script example of how to generate the corresponding bundles based on the declared future states in node during build time for production

index.html: An example of how to lazy load the bundled modules in production environment

MIT