ASP.NET MVC Bundle not rendering script files on staging server. It works on development server

In our ASP.NET MVC 4 web application, our BundleConfig.cs includes the following:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

When we look at the html of the home page on development server, we can see the following script tags even though the debug mode in web.config is set to true as <compilation debug="true" targetFramework="4.0" />:

<script src="/AFR/Scripts/jquery-ui-1.8.20.min.js"></script>
<script src="/AFR/Scripts/modernizr-2.5.3.js"></script>
<script src="/AFR/Scripts/jquery-1.7.1.js"></script>
<script src="/AFR/Scripts/jquery-ui-1.8.20.js"></script>
<script src="/AFR/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/AFR/Scripts/jquery.validate.js"></script>
<script src="/AFR/Scripts/jquery.validate.unobtrusive.js"></script>

But when we deploy the app on staging server and look at the html (View Source) of the home page, all of the above script tags with the exception of <script src="/AFR/Scripts/jquery-ui-1.8.20.min.js"></script> are missing. We've verified that all the files mentioned in these tags are in the script folder. The folder structure is exactly the same as on development machine. On staging server, the web.config fie has <compilation targetFramework="4.0" /> which means, by default, the debug="false".

As a result, some of the JavaScript functions are failing on staging server. Both the staging and development machines are Windows 2012.

Please help. Thanks.

Solution 1:

Based on your comments, we need to go over how the Bundling mechanism works in MVC.

Edit: Based on the comment below by VSDev, you need to ensure WebGrease is installed into your project. NuGet would be the easiest was to install this package.

When you set a bundle configuration (Example not from above to illustrate)

bundles.Add(new ScriptBundle("~/bundles/mainJs")
      .Include("~/Scripts/mainSite.js")
      .Include("~/Scripts/helperStuff.js"));

You then, in your views, call something like @Scripts.Render("~/bundles/mainJs"). When your web.config is set into a debug compilation OR you explicitly turn off bundling using the following line in your BundleConfig.cs file

BundleTable.EnableOptimizations = false;

Then, in your view, you will see the following rendered out

<script src="/Scripts/mainSite.js" type="text/javascript"></script>
<script src="/Scripts/helperStuff.js" type="text/javascript"></script>

These are the individual items that made up our bundle, uncompressed and listed individually. The reason these list out individually in debug mode is so that you can debug your scripts and see them as you wrote them (actual variable names, etc).

Now, when we are not in a debug compilation and have not turned off the EnableOptimizations feature, MVC will combine those files in our bundles, compress (minify) them and output only a single script tag.

<script src="/bundles/mainJs?v=someBigLongNumber" type="text/javascript"></script>

Notice that the source is the same as the name of the bundle from the bundle configurations. Also, the number after the ?v= will change anytime you change a file in that bundle. This is to help prevent caching of old js and css files by the client browsers.

Your scripts are still there and being outputted, but they are being compressed and combined into a single file called /bundles/mainJs. This feature is present to

A) compress the files and reduce information being transmitted and,

B) reduce the number of calls to a website to retrieve the necessary content to render the page.

Nothing is missing, it sounds like everything is working as intended. In a production site, the minification makes these files almost impossible to read, thus why the minification does not take affect while debugging.

As to why the jQuery UI is still being a single JS file, ensure someone didn't hard code that into your layout view. As for the JS errors, it could be errors that are present on your development box or perhaps something did not compress correctly (however, in all of my MVC development, I have not seen a JS error because of bad minification).

Solution 2:

By adding following code of line in bundle to config it works for me

bundles.IgnoreList.Clear();  

Follow the link for more explanation