How well does it work with Gulp / Grunt build tools?

[sanketsahu]

I have used Webpack with React which lets me use "require" files and when building the production release, it combines all the files which are needed from the entry script (app.js) and separates the files which aren't needed for the first load.

Does ocLazyLoad work well with build tools by merging the files which must be loaded from the entry script?

Ref: http://webpack.github.io/docs/code-splitting.html

[ocombe]

Hi, no it doesn't but that's a really good idea for enhancement. I'll need to see how webpack works and see if ocLazyLoad can work with it or if I can make something similar for angular

[sanketsahu]

Thanks for your quick reply. Webpack is really great and is used by Instagram team.

If we can improve this, that's awesome!

Another option is that, Webpack can be extended using it's "loaders". We can teach Webpack to understand AngularJS modules and write a loader for the same and then we can just "require" files just like npm packages. :-)

[ocombe]

That would probably be the best way to do it then :) I'll have a look, thanks

[msikma]

Would like to give this a +1, this would be very useful indeed.

[kentcdodds]

+1000000 :-)

[forty4]

+4

[ocombe]

2 more weeks until I get some free time back to work on this, hold on guys :)

[kentcdodds]

I feel your pain friend :-)

[kloy]

We are using ocLazyLoad in coordination with browserify. Essentially we build a core.js with ocLazyLoad modules all defined with external files. Then we build each separate module inttto its own set of files. This allows for us to then just require the module in a route resolve.

It is restricting as going more than a single level deep of lazy loading modules gets very complex. You really want the flexibility to decouple all modules into lazy loadable files yet combine chunks as needed for performance.

[sanketsahu]

AngularJS makes it really difficult to decouple different parts of the application and load them as you need, especially because it has it's own Modules and every directive, controller and service must fall into some module.

Webpack and Browserify are great tools for this approach. They provide dependency injection using CommonJS and also create bundles which is a concat of all the files which are required to load the app from the entry script of the application. You can also hint them to split the bundles wherever you feel it should lazy load the dependencies. They do it with plain Javascript and so it works great with ReactJS as React components are plain decoupled JS files.

I had no luck of implementing such a pattern with AngularJS. I will try and keep you guys updated on this thread if I crack it.

[dikaso]

http://luwen-huang.net/2015/01/25/Angular-webpack-and-gulp-for-SPAs-Part-III.html

I found this, she is using webpack, gulp, and ocLazyLoad.

@kentcdodds fixed

[kentcdodds]

@DinkoMiletic, nice find! Though I think you mean "webpack, gulp, and ocLazyLoad" using webpack and browserify together would be a little redundant :-D

[sanketsahu]

@DinkoMiletic Thanks for that!

Just to note, she isn't using ocLazyLoad to actually load the files. Files are lazy loaded by Webpack but Angular modules are injected on the fly using ocLazyLoad.

[ocombe]

:+1: Thanks ! I'll take a look at this.

[ocombe]

This is on the roadmap for 1.2 https://github.com/ocombe/ocLazyLoad/issues/141

[tomyam1]

I'm using ocLazyLoad to load ui-grid.

ui-grid.js contains many modules and your modules have to depend on them in order for them to be available. Just like a bundle of files created by gulp/grunt.

Before using ocLazyLoad, I was doing:

angular.module('myModule', [
  'ui.grid'
  'ui.grid.resizeColumns'
  'ui.grid.autoResize'
  'ui.grid.selection'
  ...
])

After I started using ocLazyLoad to load ui-grid.js some of the specs started to fail. This was because all the modules of ui-grid where loaded and it changes some behaviors.

This is how I currently solve it:

.config(function($ocLazyLoadProvider) {
  $ocLazyLoadProvider.config({
    modules: [
      {
        name: 'uiGrid',
        files: ['/path/to/ui-grid.js']
      }
    ]
  });
})

.service('myLoader', function($ocLazyLoad) {
  this.loadUiGrid = function() {
    var promise = $ocLazyLoad.load('uiGrid');
    // don't load all modules, we'll choose which modules to load next
    $ocLazyLoad.toggleWatch(false); 
    return promise.then(function(origValue) {
        // ui-grid.js was loaded, now inject only the modules we need
        $ocLazyLoad.inject([
          'ui.grid', 
          'ui.grid.resizeColumns', 
          'ui.grid.autoResize', 
          'ui.grid.selection', 
        ...
        ]);
      return origValue;
    });
  };
});

I think this a good solution for loading bundles created with grunt/gulp as well, no?

[mrdulin]

I have this issue too. I think it can't be use "gulp-concat" plugin to concat file. Just uglify each single file .Is that right?

[schirrel]

anyone had manage this with grunt?