ASP.NET Bundling and Minification Returning File Not Found (404)

Published 19 October 13 07:19 AM | Scott Mitchell

ASP.NET 4.5 introduced a nifty feature for script and stylesheet bundling and minification, a technique that can drastically reduce the size of your script and stylesheet files and, more importantly, reduce the number of round-trips the browser must make to the server to fully render a web page. Today I was working with a client who had been using bundling and minification with great success for sometime but after a recent site update his script bundle, while being rendered in the web page, was not returning the bundled, minified script content as expected, but rather was returning a 404 error (File Not Found).

I’m going to provide a more in-depth discussion on the issue at hand, but let me state the exact problem and solution in short – the problem was that the name of the script bundle – e.g., ~/bundles/MyBundle – did not match the bundle name referenced in the Scripts.Render statement – e.g., Scripts.Render(“~/bundles/MyBundleTypo”). Unfortunately, this mismatch didn’t produce any sort of runtime error that would alert us to the crux of the problem, but instead “failed silently” and generated a 404 for the requested bundle (“~/bundles/MyBundleTypo”). I was able to narrow down the problem due to the resulting <script> element that was rendered (and generated a 404). Instead of seeing a <script> element like:

<script src="http://nbaweblog.com/bundles/MyBundle?v=aLsVjoQ4OTEtRxZ322JRn0RdnugNXJ-_IdXTAvkYpyU1"></script>

We instead saw one sans the querystring, like so:

<script src="http://nbaweblog.com/bundles/MyBundleTypo"></script>

Using the appropriate bundle name – e.g., Scripts.Render(“~/bundles/MyBundle”) instead of Scripts.Render(“~/bundles/MyBundleTypo”) – fixed the problem.

And now for the more verbose explanation!

Bundling and minification involves two steps:

  1. Defining the script and stylesheet bundles in the BundleConfig.cs class, and
  2. Rendering the appropriate <script> and <style> references in the ASP.NET WebForms master page or ASP.NET MVC layout view.

Step (1) involves creating one or more ScriptBundle or StyleBundle classes and adding them to a BundleCollection. The following snippet shows the bundling added for the ~/bundles/MsAjaxJs bundle (which is included automatically when creating a new ASP.NET WebForms project in Visual Studio):

bundles.Add(new ScriptBundle("~/bundles/MsAjaxJs").Include(
    "~/Scripts/WebForms/MsAjax/MicrosoftAjax.js",
    "~/Scripts/WebForms/MsAjax/MicrosoftAjaxApplicationServices.js",
    "~/Scripts/WebForms/MsAjax/MicrosoftAjaxTimer.js",
    "~/Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js"));

Note the name of the bundle in this instance (~/bundles/MsAjaxJs) and the bundled files: MicorosftAjax.js, MicorosftAjaxApplicationServices.js, and so on.

To render the necessary <script> and <style> references in a web page you add syntax like the following. For an ASP.NET MVC view:

@Scripts.Render("~/bundles/MsAjaxJs")

And for an ASP.NET WebForms web page:

<%: Scripts.Render("~/bundles/MsAjaxJs") %>

When the bundling and minification optimizations are enabled the above markup will generate a <script> element like so:

<script src="http://nbaweblog.com/bundles/MsAjaxJs?v=aLsVjoQ4OTEtRxZ322JRn0RdnugNXJ-_IdXTAvkYpyU1"></script>

Note the querystring, which is used for caching purposes.

My client, however, was getting a different looking <script> element generated, one without the querystring like so:

<script src="http://nbaweblog.com/bundles/MsAjaxJs"></script>

Moreover, the URL, when visited, was returning File Not Found (404), rather than the bundled and minified script content.

The problem, it turned out, was a typo, a transposition of two characters in the Scripts.Render markup. Instead of Scripts.Render(“~/bundles/MsAjaxJs”) my client had inadvertently typed in Scripts.Render(“~/bundles/MsAjxaJs”). Of course, there was no bundle named ~/bundles/MsAjxaJs, but instead of generating a runtime exception (which would have been helpful) we instead just got a 404 for the <script> element.

I actually discovered the typo by using Reflector to scour the code of the System.Web.Optimization assembly in an attempt to ascertain why the rendered <script> element lacked a querystring value. Scripts.Render does not include a querystring under two conditions:

  1. The bundled scripts are registered using an absolute path (e.g., http://www.example.com/js/MyScript.js) rather than a virtual path (e.g., ~/js/MyScript.js), which was not the case here, or
  2. The named bundle could not be found in the bundles table (DING DING DING!!)

And that’s what alerted me to very carefully check to ensure that the bundle names and names specified in Scripts.Render matched precisely, which led me to the typo.

It’s never a comforting sign when you need to dig out Reflector and start parsing through disassembled source code in order to unearth the cause of an error. In my opinion there should be some sort of exception that is raised when requesting a non-existent bundled or minified script from Scripts.Render.

Happy Programming!

Filed under:

Comments

No Comments

Archives

My Books

  • Teach Yourself ASP.NET 4 in 24 Hours
  • Teach Yourself ASP.NET 3.5 in 24 Hours
  • Teach Yourself ASP.NET 2.0 in 24 Hours
  • ASP.NET Data Web Controls Kick Start
  • ASP.NET: Tips, Tutorials, and Code
  • Designing Active Server Pages
  • Teach Yourself Active Server Pages 3.0 in 21 Days

I am a Microsoft MVP for ASP.NET.

I am an ASPInsider.