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]); } }; }]);

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.

Here is the code $ocLazyLoadProvider.config({ 'debug': true, // For debugging 'true/false' 'events': true, // For Event 'true/false' 'modules': [{ // Set modules initially name : 'start', // State1 module files: ['js/controller/StartPageController.js','css/slider.css','css/style.css','js/application.js','Assets/CSS/studio.css','js/controller/RegistrationController.js'] },{ name : 'home', // State2 module files: ['js/controller/HomeController.js','css/animate.css'] }, { name : 'studio', // State2 module files: ['js/controller/StudioController.js','Assets/CSS/CssStudio.css'] },{ name : 'gallery', // State2 module files: ['js/controller/GalleryController.js'] }, { name : 'login', // State2 module files: ['js/controller/LoginController.js'] }, { name : 'registration', // State2 module files: ['js/controller/RegistrationController.js'] } ] }); //Config/states of UI Router $stateProvider .state('start', { url: "/start", views : { "" : { templateUrl:"view/slider.html" } }, resolve: { loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) { return $ocLazyLoad.load('start'); // Resolve promise and load before view }] } }) //controller.js .controller("LoginController", function ($scope, $state, $ionicModal, $rootScope, $ionicNavBarDelegate, $ionicSideMenuDelegate, DataStorageService, TranslateService, $ionicHistory, $ionicPopup, UserService, $AlertService, PortfolioService) { $ionicSideMenuDelegate.canDragContent(false); $scope.hideBackButton = true; $scope.passwordType = "password"; $scope.passwordFlag = true; $scope.user = {email: "", password: ""}; $scope.showPassword = function () { $scope.passwordFlag = !$scope.passwordFlag; if ($scope.passwordType === "password") { $scope.passwordType = "text"; } else { $scope.passwordType = "password"; } };

I am facing the same issues with loading files with ocLazyLoad.js This is my config in routing , $ocLazyLoadProvider.config({ 'debug': true, // For debugging 'true/false' 'events': true, // For Event 'true/false' 'modules': [{ // Set modules initially name : 'reportModule', // State1 module files: ['src/app/reportModule/controllers/reportModule.js','src/app/reportModule/models/reportModuleService.js'] }] }); $stateProvider.state('reportModule', { url: '/reportmodule', views: { "main": { controller: 'ReportModuleController', templateUrl: 'reportModule/views/reportModule.tpl.html' } }, resolve: { loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) { return $ocLazyLoad.load('reportModule'); // Resolve promise and load before view }] }, data: { pageTitle: 'Report' } }); Other than that i want to tell you that my projects loads all the modules with grunt's tasks So how does that affect ondemand loading .? Can you Please help me ? Regards.

I have an idea to make i18n of JavaScript code on the fly. So I'd like to get source code of a file then to make substitution of words (phrases) and only after that to "make eval" of that code. Is it possible?

Hello... I create an issue on stackoverflow please read it, https://stackoverflow.com/questions/48238918/redirect-state-to-otherwise-after-refresh-page Thanks ... pls help :'(

Hi, I am using a proxy service to get the js files from different domains which requires the url of the target js to be passed in a querystring. When I do this the scripts are not being added to the page. There is no error message and the DOM is unchanged. Is this expected? Tim

I used below to load the one angular module in another using below <div oc-lazyload= [{type:'index.html'}]><myapp></myapp></div>

I've written a custom loader, except the module injection of angular doesn't work yet, and the internet doesn't tell much about it. Now ocLazyLoad does work with module injection, awesome! +1, how can i use my own loader for the file, and then trigger ocLazyLoad to "inject" the result?

Hi team, I am using OcLazyLoad in my application and it is working pretty fine, i just want to know if there is a solution that allow to give a file a unique hash as Cachebust. Indeed, the cache attribute given is loading files each time we need a lazy loaded module. Thanks in advance. Squad

The following code doesn't work: $ocLazyLoad.load('https://js.stripe.com/v2/').then(function () console.log('stripe loaded'); }); It doesn't load the script at that location and doesn't reach the console.log line. It seems something about the URL breaks the script loading. Any ideas? Thanks for the great library!

i have a dashboard which users two controllers and these two controllers are in different file. can i know how to load two controllers using lazyload. below is the code which i have altered by does not work firsttime. when i open the page that uses the second controller and close then the dash board works fine. .state('dashboard.home',{ url:'/home', controller: 'MainCtrl', templateUrl:'views/dashboard/home.html', resolve: { loadMyFiles:function($ocLazyLoad) { return $ocLazyLoad.load({ name:'sbAdminApp', files:[ 'scripts/controllers/main.js', 'scripts/directives/timeline/timeline.js', 'scripts/directives/notifications/notifications.js', 'scripts/directives/chat/chat.js', 'scripts/directives/dashboard/stats/stats.js' ] }) $ocLazyLoad.load({ name:'sbAdminApp', files:['scripts/controllers/pvContoller.js'] }) } } })

Hi! Just wondering if it's possible to use cache parameter when using oc-lazy-load directive? I need to turn off caching. Something like this: <div oc-lazy-load="['widgets/widget/widgetModule.js']" oc-cache="false" ... "> Thanks in advance! -Kalle

I have lazy loaded the some js files. This scripts got added to my index html making them load before the dependent script files get loaded. Ex: Before AngularJS Framework loads, my lazy loaded scripts are being executed.

Somethings, I get error Fail load reload, maybe because networking. But, how can i run reload this resource ? How can I get status of this resource by OcLazyload ? Thanks guys.

Hello, I want load file whan i call my state like this [code] .state('myState', { url: "/myUrl", templateUrl: "views/myView.html", controller: "myController", resolve: { deps: ['$ocLazyLoad', function($ocLazyLoad) { return $ocLazyLoad.load({ name: 'myRoute', insertBefore: '#ng_load_plugins_before', files: [ 'provider/provider1.js', 'provider/provider2.js', 'provider/provider3.js', 'controler/mycontroller.js' ] // here todo Callback files for loader the second controller } //, Or here ? todo Callback files for loader the second controller ); }] } }) [/code]

Hi team, I am using OcLazyLoader in my application and it is working pretty fine, i just want to know if there is any way i can make OCLAzyLoader configurable. By configurable i mean i can use it as a Switch, when i want i can use it and when i don't want i can turn it off. So is there any method or any event with which i can achieve this. Thanks in advance.

Hello! Your module works great to lazy load files with known filenames in development. Is there an integrated way to map filenames with version suffix build and saved in App Web Manifest (manifest.json) I found nothing so I ask before I build s.th. that is already there.