Hi, First, thank a lot for your good job. I have an issue with ocLazyLoading.load and modules dependencies. the code: file1.js : angular.module('mod1', [ {files:[ 'file2', 'file3'] } ]) .controller('mod1Ctrl', ['$scope', 'mod3Svc', function($scope, mod3Svc){ ... }) .factory('mod1Svc', ['mod3Svc', function(mod3Svc){ return { func1: function{ return mod3Svc.func1() } } }); file2.js : angular.module('mod2', [ {files:[ 'file3', 'file4'] } ]); file3.js : angular.module('mod3', [ ]) .factory('mod3Svc', function(){ return { func1: function(){ return true} }; }); file4.js : angular.module('mod4', [ ]); app.js : (loaded with page) angular.module('app', [ 'oc.lazyLoad', 'ui.router' ]) .config(['$stateProvider', '$ocLazyLoadProvider', function($stateProvider, $ocLazyLoadProvider){ $ocLazyLoadProvider.config({ debug: true, modules: [{ name: 'ocMod1', files: ['file1.js'] }] }); $stateProvider .state('state1', { url: '/state1', templateUrl: 'state1.html', controller: 'mod1Ctrl', resolve: { myResolve: ['$stateParams', '$ocLazyLoad', '$injector', '$log', function ($stateParams, $ocLazyLoad, $injector, $log) { return $ocLazyLoad.load('mod1').then(function () { $log.debug("$ocLazyLoad.load('mod1').then RESOLVE"); var service = $injector.get('mod1Svc'); return service.func1(); }); }] } }) }]); the issue : In some situation, not everytime, $ocLazyLoad.load(['mod1']) resolve before file3.js was loaded. Best regards, Patrice Pechereau (I am french (85))

What if I call $ocLazyLoad.load('myFile.js') again? I see in the network tab it does not load that module again which is what I want but I want to know what exactly is happening?

I have used oclazyload with ui-router. For build process, we have minified the controller files and using grunt filerev, we have changed the name of files. We need to update those file names in router file with grunt usemin. Can you tell me how we should do that?

What happened to requirejs support?

When I add oc.lazyLoad into my module, it fails with the below message. http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=esApp&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.3.15%2F%24injector%2Fmodulerr%3Fp0%3Doc.lazyLoad%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.3.15%252F%2524injector%252Fnomod%253Fp0%253Dangular-momentjs%250Ahttp%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Fangular%252Fangular.min.js%253A6%253A422%250Ahttp%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Fangular%252Fangular.min.js%253A21%253A427%250Aa%2540http%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Fangular%252Fangular.min.js%253A21%253A54%250Ahttp%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Fangular%252Fangular.min.js%253A21%253A311%250Amodule%2540http%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Foclazyload%252Fdist%252FocLazyLoad.min.js%253A8%253A12216%250Au%2540http%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Foclazyload%252Fdist%252FocLazyLoad.min.js%253A8%253A3377%250Ahttp%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Foclazyload%252Fdist%252FocLazyLoad.min.js%253A8%253A3495%250Ar%2540http%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Fangular%252Fangular.min.js%253A7%253A306%250Au%2540http%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Foclazyload%252Fdist%252FocLazyLoad.min.js%253A8%253A3479%250Ahttp%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Foclazyload%252Fdist%252FocLazyLoad.min.js%253A8%253A3978%250Ae%2540http%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Fangular%252Fangular.min.js%253A36%253A320%250Ainstantiate%2540http%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Fangular%252Fangular.min.js%253A36%253A433%250Ad%2540http%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Fangular%252Fangular.min.js%253A34%253A167%250Ahttp%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Fangular%252Fangular.min.js%253A34%253A99%250Ad%2540http%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Fangular%252Fangular.min.js%253A34%253A503%250Ahttp%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Fangular%252Fangular.min.js%253A35%253A100%250Ar%2540http%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Fangular%252Fangular.min.js%253A7%253A306%250Ag%2540http%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Fangular%252Fangular.min.js%253A34%253A400%250Ahttp%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Fangular%252Fangular.min.js%253A35%253A64%250Ar%2540http%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Fangular%252Fangular.min.js%253A7%253A306%250Ag%2540http%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Fangular%252Fangular.min.js%253A34%253A400%250Aab%2540http%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Fangular%252Fangular.min.js%253A38%253A136%250Ad%2540http%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Fangular%252Fangular.min.js%253A17%253A383%250Auc%2540http%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Fangular%252Fangular.min.js%253A18%253A180%250AJd%2540http%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Fangular%252Fangular.min.js%253A17%253A2%250Ahttp%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Fangular%252Fangular.min.js%253A250%253A431%250Aj%2540http%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Fjquery%252Fdist%252Fjquery.min.js%253A2%253A27194%250AfireWith%2540http%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Fjquery%252Fdist%252Fjquery.min.js%253A2%253A54761%250Aready%2540http%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Fjquery%252Fdist%252Fjquery.min.js%253A2%253A29807%250AI%2540http%253A%252F%252Flocalhost%253A8080%252Fresources%252Fcomponents%252Fjquery%252Fdist%252Fjquery.min.js%253A2%253A29992%0Ahttp%3A%2F%2Flocalhost%3A8080%2Fresources%2Fcomponents%2Fangular%2Fangular.min.js%3A6%3A422%0Ahttp%3A%2F%2Flocalhost%3A8080%2Fresources%2Fcomponents%2Fangular%2Fangular.min.js%3A35%3A322%0Ar%40http%3A%2F%2Flocalhost%3A8080%2Fresources%2Fcomponents%2Fangular%2Fangular.min.js%3A7%3A306%0Ag%40http%3A%2F%2Flocalhost%3A8080%2Fresources%2Fcomponents%2Fangular%2Fangular.min.js%3A34%3A400%0Ahttp%3A%2F%2Flocalhost%3A8080%2Fresources%2Fcomponents%2Fangular%2Fangular.min.js%3A35%3A64%0Ar%40http%3A%2F%2Flocalhost%3A8080%2Fresources%2Fcomponents%2Fangular%2Fangular.min.js%3A7%3A306%0Ag%40http%3A%2F%2Flocalhost%3A8080%2Fresources%2Fcomponents%2Fangular%2Fangular.min.js%3A34%3A400%0Aab%40http%3A%2F%2Flocalhost%3A8080%2Fresources%2Fcomponents%2Fangular%2Fangular.min.js%3A38%3A136%0Ad%40http%3A%2F%2Flocalhost%3A8080%2Fresources%2Fcomponents%2Fangular%2Fangular.min.js%3A17%3A383%0Auc%40http%3A%2F%2Flocalhost%3A8080%2Fresources%2Fcomponents%2Fangular%2Fangular.min.js%3A18%3A180%0AJd%40http%3A%2F%2Flocalhost%3A8080%2Fresources%2Fcomponents%2Fangular%2Fangular.min.js%3A17%3A2%0Ahttp%3A%2F%2Flocalhost%3A8080%2Fresources%2Fcomponents%2Fangular%2Fangular.min.js%3A250%3A431%0Aj%40http%3A%2F%2Flocalhost%3A8080%2Fresources%2Fcomponents%2Fjquery%2Fdist%2Fjquery.min.js%3A2%3A27194%0AfireWith%40http%3A%2F%2Flocalhost%3A8080%2Fresources%2Fcomponents%2Fjquery%2Fdist%2Fjquery.min.js%3A2%3A54761%0Aready%40http%3A%2F%2Flocalhost%3A8080%2Fresources%2Fcomponents%2Fjquery%2Fdist%2Fjquery.min.js%3A2%3A29807%0AI%40http%3A%2F%2Flocalhost%3A8080%2Fresources%2Fcomponents%2Fjquery%2Fdist%2Fjquery.min.js%3A2%3A29992 Does anyone know why it fails? (function(){ angular.module("esApp", ["ui.bootstrap", "ui.router", "ngCookies","angularBootstrapNavTree",'ui.grid','ui.grid.pagination','ui.grid.selection','ui.utils.masks','uiGmapgoogle-maps','ngSanitize',"oc.lazyLoad"]); angular.module("esApp").config(["$stateProvider", "$urlRouterProvider","$locationProvider", function($stateProvider, $urlRouterProvider,$locationProvider) { $locationProvider.hashPrefix('!'); $urlRouterProvider.otherwise("/"), $stateProvider.state("index", { url: "/", templateUrl: "/resources/views/dashboard/dashboard.html" }).state("tables", { url: "/tables", templateUrl: "views/tables.html" }).state("code", { url: "/code", templateUrl: "/resources/views/code/code.html", controller:"CodeController" }).state("hotel", { url: "/hotel", templateUrl: "/resources/views/hotel/hotel.html", data:{pageTitle:"Hotel Management"}, controller:"HotelController" } ).state("restaurant", { url: "/restaurant", templateUrl: "/resources/views/restaurants/restaurant.html", controller:"RestaurantController" }) }]); angular.module("esApp").config(function(uiGmapGoogleMapApiProvider){ uiGmapGoogleMapApiProvider.configure({ key: 'AIzaSyBoJ3pCQU1ibtAxkjTgZJYQlr6SKsI0U-0', v: '3', libraries: 'weather,place,geometry,visualization' }); }); angular.module("esApp").config(function($logProvider){ $logProvider.debugEnabled(true); }); }());

I'm switching to the old latest ocLazyLoad, its absolutely awesome apart form one thing. There used to be a flag: 'rerun' which used to execute run block upon module reload. My project depends on it quite a lot, has this been removed in latest version? because it no longer works

Hello; I want to use oclazyload in my project. I am using ui-router also. In debug mode, I see the message "ocLazyLoad.fileLoaded js/controllers/XXXController.js" but after that, I am getting error. Configuration is like below: .state('shops.menus.entities', { url: "/:menuid/entities", views: { 'content@': { templateUrl: "views/wizard.html", controller: "WizardController" } } data: { pageTitle: 'Menu Wizard', roles: ['user'] }, resolve: { // Any property in resolve should return a promise and is executed before the view is loaded loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) { return $ocLazyLoad.load([ 'js/controllers/WizardController.js', ]); }], }, menuTreeObject: function($stateParams, EntityService, ShopService) { return EntityService.getMenuTree($stateParams.menuid, function() { }, function() { }); } }) Thank you.

I´m developing an application in asp.net mvc with angularjs and I need to lazy load some of my controllers, directives, services and so on. I´ve searched deeply on web and I found this js library to work with. so let see how my code are: 1 - LayoutPage (ASP.NET MVC) <html> <head> </head> <body ng-app="myAppUAI"> /*all my imports scripts are at the bottom of the page*/ <script type="text/javascript" src="..."></script> </body> </html> 2 - app.js var MyApp = angular.module("myAppUAI", ["ngProgress", "ngMaterial", "ngRoute", "oc.lazyLoad"]); MyApp.config(["$routeProvider", "$ocLazyLoadProvider" , function ($routeProvider, $ocLazyLoadProvider) { $routeProvider .when("/", { templateUrl: "/Main/Index", controller: "progressCircularController", resolve: { home: function ($ocLazyLoad) { return $ocLazyLoad.load(["/Scripts/AngularJS/Controllers/progressCircularController.js"]); } } }) .otherwise({ redirectTo: "/" }); $ocLazyLoadProvider.config({ debug: true, events: true }); }]); 3 - progressCircularController.js angular.module("myAppUAI").controller("progressCircularController", ["$rootScope", "$scope", function ($rootScope, $scope) { $scope.key = "Marcelo Bertinatto D´ Onofrio"; }]); 4 - in my view <div ng-controller="progressCircularController"> {{key}} </div> And finally, I´m getting a error in console like this: http://errors.angularjs.org/1.6.2/$controller/ctrlreg?p0=progressCircularController ocLazyLoad.fileLoaded scripts/AngularJS/Controllers/progressCircularController.js angular.js:14362 ocLazyLoad.componentLoaded ["myAppUAI", "register", "progressCircularController"] angular.js:14362 ocLazyLoad.moduleReloaded myAppUAI I've exhausted all my possibilities. Can you tell me what I´m doing wrong? Thanks in advance.

Are there any examples of handling file not found errors in resolve? I'd like to be able to catch these and return an error handler module. Thx,

Great tool, slowly getting the idea of it. Is it possible to specify dependencies in the modules declaration in the config phase ? I get that we can define a module and the files associated that need to be loaded, but can we also specify requirements using a previously declared module, ala requirejs ? for instance, $ocLazyLoadProvider.config({ modules: [ {name: 'Common', files: ['/app/common/Amodule.js']}, {name: 'NeedsCommon', requires/uses/deps:['Common'], files:['/app/other/Bmodule.js']} ] }); so that if a state needed "NeedsCommon" which in turn required "Common" to be loaded, we'd only have to specify the one module in the resolve. I've been trying various names incase its alread a feature, but havent stumbled on it yet.

Hi, I'm trying to integrate Angular with our existing application that have several jquery scripts on it. What I wanted to do is load the Partial View first before it execute the javascript from the Lazy Loading. (function () { var app = angular.module("app"); app.config(['$routeProvider', '$controllerProvider', function ($routeProvider, $controllerProvider) { app.registerCtrl = $controllerProvider.register; $routeProvider .when('/', { templateUrl: "welcome.html", resolve: { lazy: ['$ocLazyLoad', function ($ocLazyLoad) { return $ocLazyLoad.load([{ name: 'app', files: ['/js/Welcome.js'] }]); }] } }) .when('/two', { templateUrl: "views/page2.html" }) .when('/three', { templateUrl: "views/page1.html" }).otherwise({ redirectTo: '/' }) }]); })(); I'm not sure on how to do this. Many thanks

I have an application that has many modules. Each module has components that are lazily loaded using a service like so: angular.module('myApp', []) .config() .service("lazyLoad", lazyLoad) lazyLoad.$inject = ['$ocLazyLoad']; function lazyLoad(ocLazyLoad) { return ocLazyLoad.load([ "path/to/component1", "path/to/component2", etc.... ]) } I eventually bundle and minify all of the files relating to this module. But, this minified version is still telling ocLazyLoad to get files at "path/to/component1" instead of "file/to/component1.min.js". A couple of solutions?: 1) check for production or development environment in the service, create a bundle that includes all components but excludes the module file above and instead of loading "path/to/component1", just load one bundle (this one created without the module file above). 2) create a .min.js file for every component that is lazily loaded. keep the module file above the same except check for prod or dev env and if dev load all the files but with .min.js. If done this way, then it defeats the purpose of having one large minified bundle. Any other solutions? Thanks.

For various reasons my application's javascript sits on a different domain to the Index.html This causes me a problem as when using ocLazyLoad, the request for the module is made from the domain the index.html lives in. eg:- index.html = https://a.domain.com/index.html app.bundle.js = https://b.different-domain.com/js/bundle.js lazyLoadedModule.js = https://a.domain.com/lazyLoadedModule.js (should be same domain as app.bundle.js) Is there any way to specify that the get request for the lazy loaded module should be the same as where app.bundle.js lives?

I have a kind of plugin architecture where I want to be able to upload JS-files with modules and load all those in my app. I have this function in my app: app.run(function loadPlugins($http, $ocLazyLoad) { return $http.get('api/plugins').then(function (response) { $ocLazyLoad.load(response.data); }); }); A typical (and minimal) plugin could be: angular.module('app.plugin.foo', []).config(function ($stateProvider) { $stateProvider.state('app.secure.foo', { url: '/foo', template: '<h1>Foo</h1><p>Bar</p>' }); }); This works fine as long as I'm in the app and navigate to /foo. But if I go to /foo from outside my app or when I'm on the page /foo and press F5, it doesn't work. I guess the URL is resolved before the $ocLazyLoad magic. The app doesn't know about the dynamically loaded states. I need to do all lazy loading before the URL is resolved. Is this possible?

If you inject a module with ocLazyload, how to setup a configuration provider on this new module? I try to inject a loopback angular module https://docs.strongloop.com/display/public/LB/AngularJS+JavaScript+SDK I need to access the LoopBackResourceProvider angular.module('my-app-module')config(function(LoopBackResourceProvider) { // Use a custom auth header instead of the default 'Authorization' LoopBackResourceProvider.setAuthHeader('X-Access-Token'); // Change the URL where to access the LoopBack REST API server LoopBackResourceProvider.setUrlBase('http://api.example.com/'); Is it possible?

At the moment I faced an issue when the project I am working with was refactored using ocLazy Load. From my side, I am an Automation QA working with Protractor v.5.1.2 . Before implementing above-mentioned feature I was successfully using protractor involving such option as browser.ignoreSynchronization = false; But now as the app downloads js bundles separately, protractor seems to recognize the end of Angular $http and $timeout tasks, when the first js bundle is loaded. Whereas the page still is not ready for further work, because it loads next js bundle and I am getting such errors like: No element found using locator I have also tried browser.waitForAngularEnabled(true); but this is basically the same as ignoreSynchronization if you see the source code . Such approaches might seem to be efficient browser.sleep(5000); or browser.isElementPresent(by.css('a[ui-sref="some.stateLink"]')); var $registerLink = element(by.css('a[ui-sref="some.stateLink"]')); expect($registerLink.getText()).toEqual('Register Now'); or var elem = by.css('a[ui-sref="some.stateLink"]'); browser.driver.wait(function() { return browser.isElementPresent(elem); }, 5000); var $registerLink = element(elem); expect($registerLink.getText()).toEqual('Register Now'); but they make tests fragile and there too much places in my code where I have to process it. Does anybody faced such a problem? Thank you.

And way to use this with lazy loading of images and assets ? for example as you scroll?

With my router, how can I load a folder, with all its inner files? something like: return $ocLazyLoad.load('js/myFolder/');

How to unload css、js by $ocLazyLoad.load(css/js file) when goto in another controller

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