Controller is loaded in DOM but the view not loaded and can't find controller- oclazyload with jade(pugjs)

Question

I am using angular 1.6 for my project and angular-ui-routing for routing with PugJs for HTML templates. I am trying to implement Lazyload in my application, but somehow its not working may be due to jade. code :

var app = angular.module('myApp',['ui.router','oc.lazyLoad']);
app.config(['$ocLazyLoadProvider', function($ocLazyLoadProvider
 {
   $ocLazyLoadProvider.config({
   debug: true,
   modules: [{
   name: 'js',
   files: ['js/*']
 }]
});
}]);

.state("exampleState", {
        url: '/example',
        templateUrl: '/example',
        controller:'exampleCtrl',

        resolve: {
            deps: ['$ocLazyLoad', function($ocLazyLoad) {
                return $ocLazyLoad.load({
                    files: ['/js/exampleCtrl.js']
                })
            }]
        }
    })

Controller :

app.controller('exampleCtrl',function($scope){
  console.log('controller loaded');
});

and on the frontend I am using node to convert these jade into HTML, so when 'templateUrl' is accessed by routing services it would be redirected to this code:

app.get('/example', function(req, res) {
    res.render('/example');
});

this loads the example.jade in view. I am getting this in console

[$controller:ctrlreg] The controller with the name 'exampleCtrl' is not registered.

Even after controller file is loaded in DOM and also view is not rendering. any help regarding issue welcomed. Thank you

Assessor

Can you please create StackSnippet/Plnkr/JSFiddle with minimal code to reproduce the issue. – Tervalent

Sure @Tervalent will update in a while!! – Assessor

Hard to tell from the code provided, but make sure that your resolve is returning a promise. Maybe see if it renders if you remove the resolve altogether. – Stylize

Answer 1

After too much search and try i have found the solution, the problem was global variable for the module when constructing controller. Instead of using

app.controller('exampleCtrl',function($scope){
  console.log('controller loaded');
});

I used angular.module('myApp').controller(,,,);

Reference : ocLazyLoad Issues

Assessor

Answer 2

I think you should do this a little bit different. Try this:

$stateProvider.state('exampleState', {
  url: "/example",
  views: {
    "exampleLazyLoadView": {
      controller: 'exampleCtrl',
      templateUrl: '/example.html'
    }
  },
  resolve: { // Any property in resolve should return a promise and is executed before the view is loaded
    loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
             return $ocLazyLoad.load('/js/exampleCtrl.js');
    }]
  }
});

Ransell

Provide all code barbecue this one works. I think you have problem somewhere else (double check paths). I'm not sure that files: ['js/*'] is valid declaration. – Ransell