diff --git a/_guide/010. lazyloading.md b/_guide/010. lazyloading.md index bd4c1b3655ff..022f06931f0c 100644 --- a/_guide/010. lazyloading.md +++ b/_guide/010. lazyloading.md @@ -273,6 +273,45 @@ var futureState = {
Chaining `System.import` and `$ocLazyLoad.load()`
+### 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); + }); + } +}; +``` +
Lazy loading a component
+ + +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.