A Complete Angular2 Micro-Application With Lazy-Loaded Routes


Most of my prior Angular 2 demos focused on one or two specific features of the platform and/or integration of third-party code with an Angular 2 application.   Since lazy-loading of routes is an important consideration for production applications, I wanted to create a demo that illustrated how to apply lazy-loading inside the NgModule ecosystem.  Further, I wanted to keep the Flux/Redux style architecture and model that I have used in the past.  There is a subtle issue with a Redux-style model in tandem with lazy-loaded routes that use dependency injection for their instance of the global model.  The key word is global.  The Redux contract is that there is one and only one source of truth about the application.  That source can only be modified by reducers that are pure functions and only a copy of the model (or relevant slices) is sent to subscribers in order to preserve immutability.

Since the Angular2 DI system is hierarchical, a Model instance used as provider for lazy-loaded route would be instantiated as a different instance than the Singleton for all eagerly-loaded routes.  Fortunately, there is a solution to the issue of maintaining a Singleton across all routes (eager or lazy loaded) and it is implemented in this new example.  Other production considerations in the micro-app include

  • load data from actual back-end services (although the data is mocked on the back end)
  • disable the main menu while data is loaded
  • enforce one-time load of application data when routes are reloaded
  • maintain compile- and run-time immutability of the global store in line with Redux contract
  • completely reactive
  • components derive from a baseline flux component that handles subscribe/unsubscribe to model updates
  • handle route not found (i.e. 404)
  • pay tribute to The Three Stooges

The process of using the Angular 2 CLI to create a production application and then deployment to a server is discussed in the Github repo, which is what you really wanted, so have at the code and enjoy!

The application is also running on my server.


The current version is JIT-compiled.  I will use this as a reference in a future post that details the process of creating the application using AOT compilation.

Comments are closed.