AngularJS + Webpack

_guide/010. lazyloading.md

@@ -273,6 +273,45 @@ var futureState = {
 <figcaption>Chaining `System.import` and `$ocLazyLoad.load()`</figcaption>
 
 
+### AngularJS + Webpack
+
+As you may notice, AngularJS has not very well [documented API](loadNewModules) for lazy loading. This API is dangerous, **which you use at your own risk!** Because of this many teams and developers prefer to use third-party libraries such as [ocLazyLoad](https://oclazyload.readme.io/) as was mentioned before.
+
+If you use Webpack for bundling your AngularJS app then you can implement lazy loading modules with [Dynamics imports](https://github.com/tc39/proposal-dynamic-import) + $ocLazyLoad.
+
+**Lazy loading components**
+
+Now, before we proceed to the code, I would like to emphasize on **two important points** which directly affect whether we’ll get a lazyLoad module or not:
+1. In order for the module to become lazyLoad, one shouldn’t determine it as a dependency in relation to other modules.
+2. The module cannot be imported anywhere except for the route for which you’d like to create this lazyLoad module.
+
+The code for creating lazy loading module you can find bellow:
+
+```js
+const appBlog = {
+  name: "blog",
+  url: "/blog",
+  component: "blogComponent",
+  lazyLoad: ($transition$) => {
+    const $ocLazyLoad = $transition$.injector().get("$ocLazyLoad");
+
+    // !!! Dynamic import !!!
+    return import(/* webpackChunkName: "blog.module" */ "./pages/blog/blog.module")
+      .then(mod => $ocLazyLoad.load(mod.BLOG_MODULE))
+      .catch(err => {
+        throw new Error("Ooops, something went wrong, " + err);
+      });
+  }
+};
+```
+<figcaption>Lazy loading a component</figcaption>
+
+
+As you may have noticed from the code, the webpack command has added a few pleasant perks to dynamic imports. Now we have an opportunity to specify both the name of the final chunk which will create webpack and the load method.
+
+If you are seeking for some useful explanation with examples, take a peek at [this article](https://medium.com/@var_bin/angularjs-webpack-lazyload-bb7977f390dd).
+
+
 ### React
 
 The future state's `lazyLoad` function should load the module code.