I was using the 0.6.3 version and could easily carry angular dependencies, even after the bootstrap as in this example: .state('intranet.AlterarCMSPublicacao', { permissao: ['CMS', 'PUBLICACAO_ALTERAR'], url: '/AlterarCMSPublicacao/:id', views: { 'content': angularAMD.route({ templateUrl: app.dir('modulos/CMS/Publicacao/views/alterar.tpl.html'), controller: 'AlterarCMSPublicacaoController', controllerAs: 'vm', resolve: { load: ['$ocLazyLoad', function($ocLazyLoad){ return $ocLazyLoad.load(['ckeditor','ng-ckeditor']); }] } }) } }); Now with version 1.0.8 I get the following error: Object {_invokeQueue: Array[1], _configBlocks: Array[0], _runBlocks: Array[1], requires: Array[0], name: "ngCkeditor"} What is the correct way to achieve the same result with the current version? I'm using: ocLazyLoad.require.js

I was wondering if its possible to specify a directory location rather than a set of files when loading modules? For example: /modules/module1.js /modules/module2.js ... Could I load all the modules in that directory?

I got a code ``` (function(){ angular .module('MyApp') .run(_run); _run.$inject = ["$rootScope", "settings", "$ocLazyLoad"]; function _run($rootScope, settings, $ocLazyLoad) { // START loading $ocLazyLoad.load('UserModule').then(function(d){ console.log(d); console.log(user); }); // END loading // INIT or define some data $rootScope.$settings = settings; } })(); ``` but after `UserModule` loaded there is no `user` factory What am I doing wrong?

could you give me demo ?

Is there a way I can use DI paths from the directory that the module is in instead of having to specify the path from the root of the domain?

So I am using ng-templates to create a $templateCache so that I can server my html partials from the templateCache instead of making XHR requests for them. It will also allow us to browser cache the HTML partials. Basically, ng-templates create a module for me like the one below; angular.module('AngTemplates', []).run(['$templateCache', function($templateCache) { 'use strict'; $templateCache.put('/App/Anon/Test/LoginPartial.html', "<div class=\"hero hero--xl fadeIn\"><div class=\"hero__inner\"></div>" ); } In my apps main module within its config block I am using the following to lazyload my templates module above $ocLazyLoadProvider.config({ //debug: true, modules: [{ events: true, name: 'AngTemplates', files: ['App/ang.templates.js'] }] }); Now my issue is that within my $routeProvider, I am trying to do a resolve to load the module, so that that when the code hits my routes because my templateUrl's match those in the templateCache within my module it should load them from the templateCache as opposed to making an XHR request. I can see the ang.templates.js file being loaded, however it seems like its either not being picked up or its too late in the process. Is what I am trying to do possible with oclazyload? Many thanks

I try implement d3 chart in angularjs but I don't know why sometimes dependencies not work fine. http://plnkr.co/edit/nycsT8NjW0AHRWCthW60?p=preview

How to config $ocLazyLoadProvider.config.modules.name in this situation than serval modules in the same files. For example,In Angular ui-grid. 'ui.grid', 'ui.grid.exporter', 'ui.grid.selection' those modules in the same file 'ui-grid.min.js'.I must config three modules have the same files but different names.Is there any way to config name like name:[ 'ui.grid', 'ui.grid.exporter', 'ui.grid.selection' ]?

If error occurs during load, ocLazyLoad rejects the promise with following: .error(function (err) { deferred.reject(new Error('Unable to load template file "' + url + '": ' + err)); }); Here, original err result is converted to string and details such as status code are lost. I needed the status code to check 403 and handle the error. Is there any other way to access to status code?

Hi, Based on user role , i am dynamically adding the <link > with rel="import" to import the directive , this directive uses ocLazyload attribute to load all the dependencies, the dependencies are not loaded. where as if i use html import directly in head tag its working(not dynamic loading). please suggest

Is it possible to load js files and css files in all controller. please help anyone

How can I implement of loading a file that has a changing chunkhash in it's name?Using webpack 3 and the new ui router. For example loading a user_management.84bd6a8d34d479d388a8.js.

Hi, I have breakpoints in my lazyload file. It only gets hit on first load of the page. However, i have the lazyload directive set to run when certain buttons are clicked and its not happening. I need the contents to reload as the DOM has changed. Lazyload looks like this: (function () { 'use strict'; angular.module('lazyloadCtrl', ['filesService']) .controller('lazyloadCtrl', ['Files', '$ocLazyLoad', '$scope', '$rootScope', '$compile', function (Files, $ocLazyLoad, $scope, $rootScope,$compile) { $rootScope.$emit('initLazyLoad'); $rootScope.$on('initLazyLoad',function(event,args){ $ocLazyLoad.load( [{ name: 'Callout_Email', files: ['/scripts/services/lazyload.js'], rerun: true } ]) .then(function success(args) { $ocLazyLoad.load( [{ name: 'Callout_PeoplePicker', files: ['/scripts/services/sp.email.js'] } ]) .then(function success(args){ var temp = document.getElementsByClassName('scEmailLink'); angular.forEach(temp, function(value,key){ value.onclick = function(e){ angular.element('#peoplepickerElm' + key).toggle(); //console.log("Hooked into element: peoplepickerElm" + key); }; }, this); console.log("Callout_PeoplePicker success: " + args); }, function error(err){ console.log("Callout_PeoplePicker fail: " + err); }); return args; }, function error(err) { console.log("Callout_Email fail: " + err); console.log(err); return err; }); }); }]); }()); The contents of the files are not angular. They are SharePoint. And because the DOM has changed, i need them reloaded/reran, but when i run $rootScope.$emit('initLazyLoad'); from another part of my application, these files are not getting reloaded. Any suggestions? Thanks

I created a minified file with all controllers and named it as all.js, Now it has all controllers in it. Is there any way to add required controllers to this all.js file dynamically. Ex: initially all.js file should have only 'HomeCtrl', when i redirect to profile page, now all.js file should have 'ProfileCtrl' also. based on user actions all.js file should load required controllers in it. Thanks

Good morning Sir, We are lazy loading the ChartJS library to our application. But after it loaded we would need to configure the ChartJsProvider settings. like below in config method of the angularjs. (function (ChartJsProvider) { ChartJsProvider.setOptions({ colors : [ '#803690', '#00ADF9', '#DCDCDC', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'] }); }); Could you please help us to how to configure the ChartJSProvider settings using ocLazyLoad.load module? Thank you, Srinivas P N V.

HI. I have some application that is module based and I have sahred module that includes the functionality not only for one module. So it is very big module and I don't want to give it's all functionality to client I want to lazy load it's functionality But after bootstraping main app The other modules I think remember shared module as empty and don't see it's services. Can some one help me? Am I doing something wrong??

I have try to implement ocLazyLoad but getting error when it load Error: http://errors.angularjs.org/1.5.5/ng/areq?p0=loginController&p1=not%20a%20function%2C%20got%20undefined $stateProvider .state('Login', { url: '/', templateUrl: 'View/Login.jsp', controller : 'loginController', containerClass: 'lock-screen', pageLayout:'beforeLogin', PageTitle:'Login - FORTLABS', resolve:{ Login : function($ocLazyLoad) { return $ocLazyLoad.load( { name: "Login", files:['js/Controller/loginController.js'] } ) } } })

I am loading module lazily with ocLazyLoad. It is something like : angular.module('lazyModule', [ 'lazyModule.services', { files : [ 'path to services.js' ], cache : true }]); Inside service.js, I have other dependencies : angular.module('lazyModule.services', [ { files : [ 'path to some constants.js', 'path to some services.js', 'path to some model.js', 'path to some provider.js' ], cache : true } ]); In the route file I loaded the module as : .state('app', { templateUrl : 'some url', resolve : { loadModule : ['$ocLazyLoad', function ($ocLazyLoad) { return $ocLazyLoad.load(['airtel.postpaid']); }] } }) Module is loaded properly, but my view is loaded before the service.js dependencies(constants, models, providers etc.). I want to load all the module dependencies first and then the controller.

My understanding of the dependency injection was that it would load all of the files and AFTER all of them are loaded and executed it would process the Javascript. At the moment i have some dependency injections but the code in my .directive on the module im loading is being run ahead of time. When i try to add code about the stuff being loaded in the .directive (not the link just before the return) I sometimes get an error saying that ex: React has not been loaded or whatever other source hasn't finished executing. angular.module('ocxGrid', [ ["../directives/ocx-grid/ocx-grid.min.css?version=" + window.ocxRouterVersion, window.ocxExternalDependenciesPath + 'jqueryUIMinimal/jquery-ui-1.10.4.custom.min.css?version=' + window.ocxRouterVersion, window.ocxExternalDependenciesPath + 'jqueryUIMinimal/jquery-ui-1.10.4.custom.min.js?version=' + window.ocxRouterVersion ], { files: [ window.ocxExternalDependenciesPath + 'react/react.development.js?version=' + window.ocxRouterVersion, //window.ocxExternalDependenciesPath + 'react/react.production.min.js?version=' + window.ocxRouterVersion, window.ocxExternalDependenciesPath + 'react/react-dom.development.js?version=' + window.ocxRouterVersion, //window.ocxExternalDependenciesPath + 'react/react-dom.production.min.js?version=' + window.ocxRouterVersion, window.ocxExternalDependenciesPath + 'react-tooltip/standalone/react-tooltip.min.js?version=' + window.ocxRouterVersion ], serie: true } ]) .directive('ocxGrid', ['utils', '$timeout', '$parse', '$ocLazyLoad', '$q', function(utils, $timeout, $parse, $ocLazyLoad, $q){ ; //This will insert here a concatenated version of all the files in components folder /* ocx file insert */ return { restrict: 'E', scope: { gridOptions:'=oaGridOptions' }, template: '<div></div>', link: function(p_scope, p_element, p_attrs){ ReactDOM.render(<OcxGrid options={p_scope.gridOptions}/>, p_element[0]); } }; }]);