Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

What this project is for?

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


Clone this repository:

git clone https

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




A demo project to show how to lazy load Angular 1.x modules using systemjs, ocLazyLoad and ui-router-extras future state



No releases published


No packages published
You can’t perform that action at this time.