CODEWITHSUNDEEP
javascriptasp.net-mvcangularjsrequirejs
Venkat
Venkat

Reputation: 855

MVC bundling with minification and require.js

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.

Upvotes: 0

Views: 365

Answers (1)

Nicholas
Nicholas

Reputation: 846

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
});

Upvotes: 1

Related Questions