Lazy load AngularJS controllers with Webpack

Question

I am using AngularJS 1.5.6 with Webpack.

My files architecture is:

app
|- scripts
|   |- modules
|       |- homepage
|          |- homepage.js
|          |- controller
|             |- HomepageController.js
|- app.js
|- index.html

The webpack.config (please tell me if you need to see more of this file):

module.exports = {
    context : __dirname + "/app",
    entry : {
        main: "./app.js",
        vendor: [
            'angular',
            'angular-route'
        ]
    },
[...]
};

index.html contains the import of the the js files:

<script type="text/javascript" src="vendor.js"></script>
<script type="text/javascript" src="main.js"></script>

In apps.js:

(function () {  
    'use strict';

    require('./scripts/modules/homepage/homepage');

    angular.module("NgAppProject", [
        'ngRoute',
        'ng',
        'Homepage'
    ]);
})();

In homepage.js:

(function () {
    'use strict';

    angular.module('Homepage', [
        'ngRoute',
        'ng'
    ])
    .config(['$routeProvider', '$controllerProvider', function($routeProvider, $controllerProvider) {
        $routeProvider
          .when('/home', {
            templateUrl: 'scripts/modules/homepage/views/homepage.html',
            controller: 'HomepageController',
            controllerAs: 'homepageController',
            resolve: {
                deps: function() {
                    return require.ensure([], function (require) {
                $controllerProvider.register("HomepageController", require('./controllers/HomepageController'));
                    }, '_homepage');
                }
            }
          });
    }]);
})();

The Problem:

When I start my app and go to localhost:8080/#/home, I get the error:

Error: [ng:areq] Argument 'HomepageController' is not a function, got undefined

I think it can't find my controller, but I can't figure out why.

However this works fine:

angular.module('Homepage', [
    'ngRoute',
    'ng'
])
.config(//config here)
.controller("HomepageController", require('./controllers/HomepageController'));

I would really welcome any help, thank you!

Rick · Accepted Answer · 2018-08-03 20:19:26Z

1

I think that require.ensure not return promise. So, you can try this approach:

resolve: {
  deps: ['$q', function($q) {
    var deferred = $q.defer();
    require.ensure([], function(require) {
      $controllerProvider.register("HomepageController", require('./controllers/HomepageController'));
      deferred.resolve();
    }, '_homepage');
    return deferred.promise;
  }]
}

edited Aug 3, 2018 at 20:19

Rick

4,1349 gold badges29 silver badges38 bronze badges

answered Jun 10, 2016 at 17:54

Bob Sponge

4,7481 gold badge25 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Lazy load AngularJS controllers with Webpack

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related