Lazy Loading

[MacrofonoEstudio]

Hi there!

We are starting a big app (+400screens) and we are thinking to follow your style guide. We have a main doubt; can’t figure out how to implement Lazy Loading when the route is defined in the routed component itself.

Is it possible to implemented Lazy Loading in this kind of apps? Do we have to load all the app components at the beginning?

Thank you for your great work!

Aleix

[george3447]

For lazy loading please see https://github.com/george3447/angular-webpack-material-lazyload-typescript-starter-template

[MacrofonoEstudio]

Thank you for your answer @george3447, cool project 👍

I have started to use ui-router 1.0 too, but without WeckPack. Something like this:

$stateProvider
                .state("transfers", <ng.ui.IState> {
                    url: "/transfers",
                    lazyLoad: (transition) =>
                            transition
                                .injector()
                                .get("$ocLazyLoad")
                                .load(["app/js/components/view/section/transfers/transfers.module.min.js"]),
                    
                });

[george3447]

@MacrofonoEstudio thanks for sharing. I am pretty much curious to know which build system you are using, and how you split the code module wise?

[mattbrunetti]

@MacrofonoEstudio I'm also very curious to know which build system you're using and how (or whether) you split the code into bundles, since that would seem to be a challenge implementing with lazy loading..

(Please say you're using browserify and the factor-bundle plugin! 😄 )

Anyways, Lazy Loading is a must-have for our application, since our it's expected to grow to an unbounded number of screens. Well factored bundles that reduce the number of required HTTP requests is less of a necessity. Nonetheless I would like to have both, and I'll be working on this issue.

@toddmotto If we wanted to contribute Lazy Loading (with well-factored code bundles) to your style guide, would it be best to start with a PR here? Or in angular-1-5-components-app? Or is Lazy Loading out-of-scope for these repositories?

Sorry for my lack of background-knowledge and if I've confused anything here. I've new to AngularJS, but have lots of experience with ES6, module loaders, build systems, etc. @george3447 Did I understand correctly what you are curious about?

[toddmotto]

Hey Matt. I think a performance section is definitely warranted - not sure if it should be more "resources" focused or showing code examples - I think a list of resources keeps the guide more focused to point to external resources with code demos etc. Lay it out to play it out... as the saying goes 🎱

[MacrofonoEstudio]

Hi @george3447 @mattbrunetti ,
We started without bundeling because of the lack of knowlege . Now we are starting with Webpack.
Any good resources about it to recommend?
@mattbrunetti It would be nice a post about it!
Thanks!

[mattbrunetti]

@MacrofonoEstudio There certainly are a some resources on the subject to go through. Not sure which ones are good though lol

This demo is linked to from the ocLazyLoad docs site - https://github.com/ay13/webpack-angular-oclazyload

Here's another demo and a blog post I'd look into if I was going the webpack way.

@george3447 Any resources to add?

I think I would rather go the gulp+browserify way though, as it takes a more modular approach and thus has a healthier ecosystem of plugins and is more flexible, at the expense of sometimes requiring more setup. See comments on this gist for a good debate.

In our own implementation we will basically be trying to work lazy-loading into a setup like angularjs-gulp-browserify-boilerplate.

[mattbrunetti]

@toddmotto Definitely with you on the whole references to resources keeping it focused thing. I think inline code samples should only be used when necessary, to tie the references together.

[george3447]

@mattbrunetti no other resources that I am aware of. I have used that exact same blog post that you have pointed to implement lazy loading.

[ViieeS]

since AngularJS v1.6.7 you can use native method $injector.loadNewModules for lazy-loading
https://github.com/angular/angular.js/blob/master/CHANGELOG.md#new-features-2