Angular controller not loading using OcLazyLoad and ngRoute

Question

I have an app that which has a load of scripts loading initially and the list is growing as development goes on. I want to lazy load scripts which contain controllers as and when needed. I am using OcLazyLoad along with ngRoute for the routing option (i did try ui-route which actually had the same end result but was causing other app issues). The lazy load and routing is working fine, scripts and views are only loaded when needed, but the issue is the controller is not being loaded (Argument 'caseReviewController' is not) so it's as though the controller does not exist.

Here is a simple version of what I have in my app.js file...

var app = angular.module('dashboard', ['oc.lazyLoad', 'ngRoute', 'LocalStorageModule']);


        app.config(function ($ocLazyLoadProvider, $routeProvider, localStorageServiceProvider) {


                $ocLazyLoadProvider.config({
                        loadedModules: ['dashboard'], modules: [
                            {
                                name: 'caseReview',
                                files: ['js/controllers/case-review.js']
                            }
                        ]
                });


                $routeProvider

                        //other routes here...

                        .when('/case-review', {
                            templateUrl: 'views/case-review.html',
                            controller: 'caseReviewController',
                            resolve: {
                                loadModule: ['$ocLazyLoad', function ($ocLazyLoad) {
                                    return $ocLazyLoad.load('caseReview');
                                }]
                            }
                        })

});

In the seperate case-review.js file I have a simple controller

app.controller('caseReviewController', function($scope, localStorageService, $route){
    //do stuff
});

This controller is not being found or executed but the view and js file are being lazy loaded as expected. Any help would be great.

Thanks.

Answer 1

In your separate case-review.js, you must get the reference of app.

angular.module('dashboard').controller('caseReviewController', function($scope, localStorageService, $route){
    //do stuff
});

As you've mentioned it's in separate file, it may not know about the app variable. It's better to get the reference of the angular module in the separate file.

This must solve your issue.