Predefined modules dosn't work when injected.

[MtDalPizzol]

I have this config on my main application:

var mainApp = angular.module('mainApp', ['oc.lazyLoad']);

mainApp.config(['$ocLazyLoadProvider', function($ocLazyLoadProvider) {

  $ocLazyLoadProvider.config({
    modules: [{
      name: 'dependency2',
      files: ['/full/path/to/dependency2.js']
    }]
  });

}]);

Now, when injecting dependencies into other modules, this happens:

This works:

var subApp = angular.module('subApp', [
    'dependency1',
    ['/full/path/to/dependency2.js'] // <-- This works 
]);

This dosn't work

var subApp = angular.module('subApp', [
    'dependency1',
    ['dependency2'] // <-- This dosn't work
]);

Am I missing something?

[ocombe]

Hmm no you're not, it should work !

[MtDalPizzol]

Hi, Oliver! Here's the deal: I spent two whole days trying to get this working and here are my conclusions and observations:

There's really no problem with the code I wrote: it simply fails the moment I switch the dependency's file full path by the dependency's name. I have tryed this either with the default and the RequireJS versions of the lib.

Given this, I was able to think in the following workarounds, since I'm working on a really big project and I can't have the full path of the dependencies hardcoded over and over again:

1. Create a global object holding the full path of the files, so I can use this object to inject dependencies, like this:

var globlaDependenciesObj = {
    dependency2: '/full/path/to/dependency2.js'    
};

var subApp = angular.module('subApp', [
    'dependency1',
    [globlaDependenciesObj.dependency2] // <-- I have no idea if this can work
]);

2. Use the RequireJS version of the lib to load and register controllers when routing and use common AMD define() to load everything else, like this:

define(['dependency2'], function(){
    var subApp = angular.module('subApp', [
        'dependency1',
        'module.dependency2' // <-- This works
    ]);
});

This worked and, until now, seems to be the way I will keep going since I like the async load pattern of RequireJS.

3. Wait for you to inspect the issue and save my life. =P

Do you have a word on this? Which of this is the most recomended one?

Best regards!

[ocombe]

I will take a look at this tonight :)

In the mean time, could you try this please:

var subApp = angular.module('subApp', [
    'dependency1',
    {name: 'dependency2'}
]);

[ocombe]

This should be fixed as of 1.0.3, it was a bug hard to track, but I think that I got it :)

[MtDalPizzol]

Awesome! I'm sorry I didn't had the time to test your suggestion until now, since I ended up setting my project with requirejs. I'll give it a try this weekend and I'll let you know the results asap! Thanks for your attention, Oliver!

[ocombe]

No problem :)
I fixed another bug with this anyway

[MtDalPizzol]

Hi again, Oliver! I think you ended up only partially solving the problem... Here's what's happening now: The files are loaded as expected. Awesome! But the code isn't running... here's an example:

app-router.js

app.config(['$routeProvider', '$ocLazyLoadProvider', function($routeProvider, $ocLazyLoadProvider) {

  $ocLazyLoadProvider.config({
    jsLoader: requirejs,
    modules: [{
      name: 'moduleController',
      files: ['/path/to/module-controller.js'] // This is lazy loaded! Ok.
    }, {
      name: 'moduleResource',
      files: ['/path/to/module-resource.js'] // This is also lazy loaded! Ok.
    }, {
      name: 'crudDependencies',
      files: [
        '/path/to/dependency1.js',  // This is lazy loaded! Ok.
        '/path/to/dependency2.js' // This is also lazy loaded! Ok.
      ]
    }]
  });

  $routeProvider.when('mdoule', {
    templateUrl: '/path/to/module-list.html',
    controller: 'ModuleIndexController',
    resolve: {
      load: ['$ocLazyLoad', function($ocLazyLoad) {
        return $ocLazyLoad.load(['moduleController']);
      }]
    }
  });

}]);

module-controller.js

var app = angular.module('module.controller', [['moduleResource', 'crudDependencies']]);

app.controller('ModuleIndexController', function($scope, crud) {
   // Nothing here runs
}]);

[MtDalPizzol]

Now, this have worked:

main.js

requirejs.config({
  baseUrl: '/my/base/url/',
  paths: {
    dep1: '/path/to/dependency1.js',
    dep2: '/path/to/dependency2.js',
    modRsc: '/path/to/module-resource.js'
  }
});

module-controller.js

var app = angular.module('module.controller', [['modRsc', 'dep1', 'dep2']]);

But I still think the first one is the way to go...

[ocombe]

How about:

var app = angular.module('module.controller', ['moduleResource', 'crudDependencies']);

It should work (no need for an array of arrays).

[MtDalPizzol]

Nope... same problem: files are loaded but the code dosn't run... =/

[ocombe]

Well there's a bug that I'll fix tonight where .run don't... run, maybe that's the problem :)

[MtDalPizzol]

Awesome! Thanks again!

[sleeper01]

ooh,I got the problem,too. Have you fixed the bug?My problem is the same as files are loaded but the code dosn't run

[ocombe]

Hmm that's old, so I'm not sure :)
There's nothing in the changelog for july 30th that talks about a run bug

[sleeper01]

Is there any way to just bypass this bug?

[ocombe]

Your problem is that the run blocks don't work ? Could you make me a plunkr or something so that I can try to narrow it down please?

[sleeper01]

$ocLazyLoadProvider.config({
          modules: [{
            name: 'HomeModule',
            files: ['apps/home/HomeModule.js',
            'apps/home/controller/HomeCtrl.js',
            'apps/home/service/HomeService.js']
          },{
            name: 'SdkModule',
            files: ['apps/sdk/SdkModule.js']
          }]
        });

$stateProvider.state('index', {
          url: "/", 
          templateUrl: 'apps/home/view/home.html',
          controller : 'HomeCtrl',
          resolve: {
            loadModule: ['$ocLazyLoad', function($ocLazyLoad) {
                $ocLazyLoad.load('HomeModule').then(function() {

                }, function() {

                });
            }]
          }
        });

In the HomeModule.js
angular.module("HomeModule",['SdkModule']);

Here is SdkModule.js

angular.module('SdkModule',[]).factory("DateUtils",['$filter',function($filter){
    return {
        getCurrentDate : function(){
            return $filter('date')(new Date(),'yyyy-MM-dd HH:mm:ss');
        }
    };
}]);

where the page route to "/",The SdkModule.js was loaded as deps,but the code don't run

[ocombe]

In your resolve function, you forgot to return the load promise:

$stateProvider.state('index', {
          url: "/", 
          templateUrl: 'apps/home/view/home.html',
          controller : 'HomeCtrl',
          resolve: {
            loadModule: ['$ocLazyLoad', function($ocLazyLoad) {
                return $ocLazyLoad.load('HomeModule').then(function() {

                }, function() {

                });
            }]
          }
        });

[sleeper01]

A ha,Yes u r right! Thanks very much!

[ocombe]

no problem :)

[sleeper01]

Hey,How can I use ocLazyLoad to load an AMD module?
In my HomeModule.js
this is work
angular.module("HomeModule",['DateUtilsModule','Home.HomeCtrl']);

But this can't

define(function(){
angular.module("HomeModule",['DateUtilsModule','Home.HomeCtrl']);
});

am I wrong with anything?

[ocombe]

ocLazyLoad only loads regular angular modules.
If you want to load something else you can either use requirejs and ocLazyLoad (the requirejs version in the dist folder), or write your own jsloader and plug it into ocLazyLoad