MVC bundling with minification and require.js

Question

I am building a MVC application and using angular and require.js in it.

I have defined my JS files as below.

First JS File:

define(function (require) {
    'use strict';
     var angular = require('angular');
     var app = angular.module('App');

     app.service('Service1', function () {
     });
}); 

Second JS File:

define(function (require) {
    'use strict';
     var angular = require('angular');
     var app = angular.module('App');

     app.service('Service2', function () {
     });
});

In the require js configuration , I gave the path of the script bundle and could see JS files are bundled and minified and is loaded. But we are getting an error " Service2 is not defined ".

When i merge the two files or remove " define(function (require) " from the individual files then everything is working fine.

Merged File:

define(function (require) {
    'use strict';
     var angular = require('angular');
     var app = angular.module('App');

     app.service('Service1', function () {
     });

     app.service('Service2', function () {
     });
});

First JS File:

    'use strict';
     var angular = require('angular');
     var app = angular.module('App');

     app.service('Service1', function () {
     });

Second JS File:

    'use strict';
     var angular = require('angular');
     var app = angular.module('App');

     app.service('Service2', function () {
     });

I cannot merge the files as above since i have huge list of JS files.

I am not 100% sure what would be the impact if i remove " define(function (require) ".

What would be best approach to use MVC's bundling and minification feature in my scenario?

Thanks.

Answer 1

The function passed to define does not run until it is required by something else. So your service 2 is not defined error is probably because you haven't explicitly required it.

require(['First', 'Second'], function () {
    //Use Service1 and Service2
});