Can't lazy load controllers in angular with oc.lazyLoad - controller not found

Question

I want to use lazy loading in my Angular project:

This is the relevant app.js code:

var app = angular.module('eva', ['ui.router',
  'controllers', 'oc.lazyLoad']);

app.config(['$stateProvider', '$urlRouterProvider', '$httpProvider', '$locationProvider', '$ocLazyLoadProvider',
  function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider, $ocLazyLoadProvider) {
    $httpProvider.interceptors.push('AuthInterceptor');


    $urlRouterProvider.otherwise("/");
    $locationProvider.hashPrefix('!');

    $stateProvider.state('challenge', {
      url: '/challenges',
      templateUrl: 'views/Challenges.html',
      controller: 'ChallengeCtrl',
      onEnter: ['$state', 'auth', function($state, auth) {
        if (!auth.isLoggedIn()) {
          $state.go('login');
        }
      }],
      resolve: { // Any property in resolve should return a promise and is executed before the view is loaded
        loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
          // you can lazy load files for an existing module
          return $ocLazyLoad.load('js/controllers/ChallengeController.js');
        }]
      }

This is my controller definition code:

angular.module('eva').controller('ChallengeCtrl', ['$scope', 'auth','$translate', 'challengeFactory', 'userFactory', 'userService',
  function($scope, auth, $translate, challengeFactory, userFactory, userService) {

I am not loading the challengecontroller.js file in the index.html file.

I include oclazyload just before app.js in the index.html file:

<script type="text/javascript" src="js/lib/oclazyload/dist/ocLazyLoad.js"></script>
        <script type="text/javascript" src="js/app.js"></script>

I get this error now when I run the app:

Error: [ng:areq] http://errors.angularjs.org/1.4.7/ng/areq?p0=ChallengeCtrl&p1=not%20a%20function%2C%20got%20undefined

I tried many things for lazy loading, none of them worked. Now I just followed the example on Example

I really am in a pickle here, and I have no clue what to do to get the lazy loading working. I rather not work with requirejs.

score 0 · Answer 1 · answered Dec 03 '15 at 06:20

angular config is just a function, any dependencies should be already $inject before you call this config. you may include it in <script> tag and add it to app = angular.module['app', ['depend1'])

so you change it and try it again.

app.config(function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider, $ocLazyLoadProvider) {

btw: open your Browser Dev-Tools, to check whether this file js/controllers/ChallengeController.js is loadead correctly

Can't lazy load controllers in angular with oc.lazyLoad - controller not found

1 Answers1