Ask a Question
Back to All

Can I add defer attribute to the lazy loaded js files

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.

Lazy load routes

My route.js file is getting bigger and bigger (8000 line until now!)

global config cache: false

There are a way to configure cache: false, in a global config, actually i enable that in every load({cache:false}) method

Lazy load each required controller after bundling all minified controllers

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

ocLazyLoad to load js and css files in all controllers

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

How to config $ocLazyLoadProvider.config.modules.name in this situation than serval modules in the same files.

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' ]?

Redirect state to otherwise after refresh page

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 :'(

Dependency Injection not working properly

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

How to work with Lazy Load with Protractor

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.

rerun contents of lazylaoded file

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