Discussions

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.

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

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.

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.

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?

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

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?

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/');