Discussions
.load() resolve before module dependencies loaded
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))
Posted by Patrice Pechereau almost 8 years ago
Load again!
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?
Posted by Siddharth Papreja about 8 years ago
grunt usemin with oclazyload
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?
Posted by Nishith almost 8 years ago
Fail to load.
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);
});
}());
Posted by sooyong Kim about 8 years ago
module rerun
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
Posted by Marcin about 8 years ago
Requirejs
What happened to requirejs support?
Posted by Marcin about 8 years ago
oclazyload + angularjs + ngroute + asp.net mvc
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.
Posted by marcelo bertinatto over 6 years ago
I am getting "Argument 'XXXController' is not a function, got undefined" error
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: {
'[email protected]': {
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.
Posted by Adil Burak Kılıç over 7 years ago
How to lazy load file synchronously?
I have load several files with ocLazyLoad and it logs out that the second load before the first one and it cannot find the defined module.
here are my lazy load code
```javascript
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'PSS_AdminApp',
insertBefore: '#ng_load_plugins_before',
files: [
'assets/global/scripts/datatable.js',
'assets/global/plugins/datatables/datatables.min.js',
'assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js',
]
});
}]
}
```
Posted by Ha Hoang over 6 years ago
Error handling example
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,
Posted by Greg almost 8 years ago