Discussions
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
Posted by Karthick over 4 years ago
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' ]?
Posted by lynn young over 5 years ago
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 :'(
Posted by Maher Ashori over 5 years ago
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]);
}
};
}]);
Posted by Michael Pilote over 5 years ago
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.
Posted by Yevhen Batsiun over 5 years ago
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
Posted by Andy almost 6 years ago
Loading a file with chunkhash with webpack (dynamic name)
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.
Posted by Slava Roikhel almost 6 years ago
Need to load templatecache JS file before hitting the routes so they load from templateCache
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
Posted by Brian McG almost 6 years ago
Dependecy Injection from module directory
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?
Posted by Lukus Reindl about 6 years ago
Empty Dependency module with dinamic loaded services and factories
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??
Posted by Artur Gevorgyan about 6 years ago