Controller not getting loaded

[Digambar14]

I have written one controlller js LoginController.js. I want include it only for login state. So i have written code in app.js like

var FrontEnd = angular.module("FrontEnd", ['ui.router', 'oc.lazyLoad']);

FrontEnd.config(['$ocLazyLoadProvider', function($ocLazyLoadProvider) {
      // We configure ocLazyLoad to use the lib script.js as the async loader
      $ocLazyLoadProvider.config({

      });
  }]);

FrontEnd.config(function($stateProvider, $urlRouterProvider) { 


    $stateProvider
        .state('login', {
            url: '/login',
            templateUrl:  BASE_URL + '/default/index/template/name/login',
            controller: 'LoginController',
            resolve: {
                deps: ['$ocLazyLoad', function($ocLazyLoad) {
                    return $ocLazyLoad.load({
                        name: 'FrontEnd',
                        insertBefore: '#ng_load_plugins_before',
                        files: [
                            'js/controllers/LoginController.js'
                        ] 
                    });
                }]
            }
        });

    $urlRouterProvider.otherwise('/login');
});

And my LoginController.js is:

FrontEnd.controller('LoginController', function() {
    console.log("In Login Controller");

});

For now I am trying only to see where it comes in controller or not. When I directly include my LoginController.js in layout, it works perfectly but when I try with loading using lazy loader it gives me blank screen. It does not show even any error in console. Please help me out, its urgent. Using version 0.5.1.

Thanks.

[ocombe]

Hi, if you want to see the errors, you should add success & error callbacks to the load function (I should write this in the docs):

return $ocLazyLoad.load({
  // you don't have to give the name of the module anymore, I removed it
  insertBefore: '#ng_load_plugins_before',
  files: [
    'js/controllers/LoginController.js'
  ] 
}).then(function success(args) {
  console.log('success');
  return args;
}, function error(err) {
  console.log(err);
return err;
});

Then the problem here is probably that in your loginController.js file you reference "FrontEnd" but the global variable is probably not available in your file.

Change it to:

angular.module("FrontEnd").controller('LoginController', function() {
    console.log("In Login Controller");

});

[Digambar14]

Thanks for reply. But its still not working.:( I tried to console error with your code. But still not showing any errors.

[ocombe]

OK, does an element with the id #ng_load_plugins_before really exist in
your Dom? Do you see the controller file being loaded in the network from
tab?

Also, what versions of angular and ocLazyLoad do you use?

[Digambar14]

Yes, DOM includes element with id #ng_load_plugins_before.

No, I checked, controller file is not being loaded.

Using angular's v3.1.15 and ocLazyLoads v0.5.1.

[Digambar14]

Can you look into it using team viewer. Because I am fed up with it since last two days and its very urgent.

[ocombe]

I'm making a plunkr to reproduce the bug

[ocombe]

Ok, if I remove "insertBefore: '#ng_load_plugins_before'" it works. You can use this for now (unless this parameter is really really necessary for you?), I need to check why "insertBefore" isn't working.

[Digambar14]

Yes boss. Thank you very much. "insertBefore" is not working. Its not that much necessary for me but wanted to keep my controllers file above particular div. But let me know if you resolve the issue of insertBefore.

Once again thanks.:)

[ocombe]

I'm using angular.element to get the element, and for some reason it doesn't work. If I change it to document.querySelector then it works fine...
I'll need to debug further to know why.

[Digambar14]

But getting this error in console: SyntaxError: expected expression, got '<'.

If I manually load LoginController.js into layout it works fine. And I checked in dom its not getting included in DOM but in Network its showing js is being loaded.

[ocombe]

Here is a working version of your code (I might have changed a few file names/urls to make it work on plunkr): http://plnkr.co/edit/tqDGVCaRU3qI4EBWJsil?p=preview

[Digambar14]

Mistakenly closed issue...Sorry..:(

[Digambar14]

I got where is the issue. I am using this in zend. Lazyloader sending request for loading LoginController.js. But Zend is unable to find the request so its throwing an error:
Fatal error: Uncaught exception 'Zend_Controller_Dispatcher_Exception' with message 'Invalid controller specified (error)' in C:\wamp\www\insite-git\insite-app\library\Zend\Controller\Plugin\Broker.php on line 336

Do you know what may be solution for it?

[ocombe]

Hu no, that's a php issue on your server, I don't think it has anything to do with ocLazyLoad

[Digambar14]

Thanks. But if you resolve issue of "insertBefore" please let me know.

[Digambar14]

Hi,

I resolved issue with zend. Your plugin working like charm. Thanks.

Plz let me know once you fix the issue of "insertBefore"..Cheers...!

[ocombe]

Yes I'll let you know

[ocombe]

Ok it's fixed in 1.0.0-beta.1.
The final 1.0.0 should be released soon (this week).

[burakkilic]

I still have this issue. Code tries to find the anchor in head tags but I need to load script in body. I tried in 1.0.0-beta.2

[ocombe]

Do you have an error message @burakkilic ?

[burakkilic]

I am getting following error:

NotFoundError: Node was not found
anchor.insertBefore(el, insertBeforeElem);

My code is:

return $ocLazyLoad.load({
                    insertBefore: '#load_controllers_before',
                    files: [
                        'js/controllers/BillingController.js'
                    ]
                });

And tag in the tags is

<div id="load_controllers_before"></div>

[ocombe]

Can you type:

document.querySelector('#load_controllers_before');

in your console, and check if it finds the node in your webpage ?

[burakkilic]

Yes, it finds.

[ocombe]

OK found the issue, I'm searching for the node in head like you said, instead of taking the parent of the selector... :-/
Sorry for that, thanks for the report, I'll fix it :)

[burakkilic]

Thank you. Waiting for the news:)

[ocombe]

Fixed :)

[Digambar14]

Thanks dude..:)

[RSPaul]

Hi,

I am using version v1.0.9 and I am still getting the error: SyntaxError: expected expression, got '<'
http://awesomescreenshot.com/0bf5n6jsd6

Here is my function:

$stateProvider
.state('home', {
url: '/',
templateUrl: 'modules/core/client/views/home.client.view.html',
controller: 'HomeController',
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
name: "FrontEnd",
insertBefore: document.querySelector('#load_controllers_before'),//'#load_controllers_before',
files: [
'public/lib/landingjs/jquery.min.js',
'public/lib/landingjs/jquery.easings.min.js',
'public/lib/landingjs/jquery.fullPage.js',
'public/lib/landingjs/cbpFWTabs.js',
'public/lib/landingjs/jquery.sidr.min.js',
'public/lib/landingjs/scripts.js',
'public/lib/landingjs/zoomcharts.js',
'public/lib/landingjs/indexpagedemo.js',
]
}).then(function success(args) {
console.log('success', args);
return args;
}, function error(err) {
console.log('error loading this ', err);
return err;
});
}]
}
})

[MohammadMoeinFazeli]

hi
this problem is because of a bug in ocLazyLoad...
this bug is:
when you write an element in your html page that want to use for "insertBefore" in ocLazyLoad, if this element is in body section of html page you get ERROR....
and if you write this element in head section of html page, every things fine and your code work..

ok... you should write the element in head section of html page

[justgeek]

if the problem persists, note that you have to define module name in lazy load returned object, i.e:

loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
// you can lazy load files for an existing module
return $ocLazyLoad.load({
name:'app',//must include angular module name
files: ['js/controllers/BillingController.js']
});
}]

[benallamar]

Hi every one,
I get the same error, insertBefore doesn't work for me even after I download the last version of the code.
Need help please 😄

[justgeek]

@benallamar can you show your code?

[benallamar]

@justgeek thank you for your answer
.state("orders", { url: "/orders", templateUrl: "views/order/list.html", data: {pageTitle: 'Orders'}, controller: "OrdersCtrl", resolve: { deps: ['$ocLazyLoad', function ($ocLazyLoad) { return $ocLazyLoad.load({ name: 'MetronicApp', serie: true, insertBefore: '#ng_load_plugins_before', // load the above css files before '#ng_load_plugins_before' files: [ /* CSS Files */ 'assets/global/plugins/datatables/datatables.min.css', 'assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.css', 'assets/global/css/components.min.css', 'assets/global/css/components.min.css', 'assets/global/css/plugins.min.css', /* JAVASCRIPT Files */ 'assets/global/scripts/datatable.js', 'assets/global/plugins/datatables/datatables.min.js', 'assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js', 'assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js', 'assets/pages/scripts/table-datatables-buttons.min.js' ] }); }] } })

[justgeek]

@benallamar did you try using it without deps ? I mean put depencies elsewhere, what is serie:true ?
can you send a plunker with your code so we can debug it togther ?

[harendra21]

File is loading but shows controller is undefined

.state('login', {
url: '/login',
views: {
'content': {
templateUrl: 'view/user/login.html',
controller: 'loginCtrl',
}
},
resolve: {
loginCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load('login');
}],
auth: function(authService) {
return authService.is_auth();
}
}

app.config(['$ocLazyLoadProvider',
function($ocLazyLoadProvider) {
//Config For ocLazyLoading
$ocLazyLoadProvider.config({
'debug': true, // For debugging 'true/false'
'events': true, // For Event 'true/false'
insertBefore: '#ng_load_plugins_before',
'modules': [{ // Set modules initially
name : 'login', // State1 module
files: ['controllers/loginCtrl.js']
},{
name : 'state2', // State2 module
files: ['app/components/state2/state2Module.js']
}]
});
}]);

Using angular 1.4.8 & oclazyload 1.0.0 beta 1