ASP.NET MVC Bundle does not display script files on an intermediate server. It works on a development server

Question

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 the development server, we can see script tags even if 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 application on an intermediate server and look at the html (View Source) on the home page, all script tags except <script src="/AFR/Scripts/jquery-ui-1.8.20.min.js"></script> are missing. We checked that all the files mentioned in these tags are in the script folder. The folder structure is exactly the same as on the development machine. On the intermediate server, web.config fie has <compilation targetFramework="4.0" /> , which means, by default, debug = "false".

As a result, some of the JavaScript functions do not work on the staging server. Both machines for development and development - Windows 2012.

Please, help. Thank.

Answer 1

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

Change Based on the VSDev comment below, you need WebGrease installed in your project. NuGet would be easiest to install this package.

When you set up the beam configuration (example not top to illustrate)

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

Then in your views, you call something like @Scripts.Render("~/bundles/mainJs") . When your web.config is set to debug compilation OR , you explicitly disable binding using the following line in the BundleConfig.cs file

 BundleTable.EnableOptimizations = false; 

Then, in your opinion, you will see the following displayed

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

These are the individual elements that made up our package, uncompressed and listed separately. The reason they are listed separately in debug mode is because you can debug your scripts and view them as you write them (names of actual variables, etc.).

Now that we are not in debug compilation and have not disabled the EnableOptimizations function, MVC will combine these files in our packages, compress (reduce) them and output only one script tag.

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

Note that the source matches the package name from the bundle configurations. In addition, the number after ?v= will change when the file in this package changes. This will help prevent caching of old js and css files by client browsers.

Your scripts still exist and are output, but they are compressed and combined into a single file called /bundles/mainJs . This feature is present.

A) compress files and reduce transmitted information and

B) reduce the number of calls to the website to get the necessary content to display the page.

Nothing is missing, it seems that everything is working as intended. At the production site, minimization makes these files almost impossible to read, so why minimization does not affect debugging.

Regarding the fact that the jQuery user interface is still the only JS file, make sure that someone hasn't made it hard code in your layout view. As for JS errors, these may be errors that are present in your development window or maybe something did not compress correctly (however, in all of my MVC development I did not see a JS error due to a poor rating).

Answer 2

I ran into the same problem and I'm not sure why, but it turned out that the script link generated by Scripts.Render did not have a .js extension. Since it also does not have a Type attribute, the browser simply could not use it (chrome and firefox).

To solve this problem, I changed the configuration of my package to generate compiled files with the js extension, for example.

  var coreScripts = new ScriptBundle("~/bundles/coreAssets.js") .Include("~/scripts/jquery.js"); var coreStyles = new StyleBundle("~/bundles/coreStyles.css") .Include("~/css/bootstrap.css"); 

Pay attention to new StyleBundle(... instead of saying ~/bundles/someBundle , I say ~/bundlers/someBundle.js or ~/bundles/someStyles.css ..

This leads to the fact that the link generated in the src attribute has .js or .css on it when optimizations are turned on, since browsers know, based on the file extension, what mime / type to use in the request for receipt, and everything works.

If I remove the extension, everything will break. This is because @Scripts and @Styles do not display all the necessary attributes to understand src for a file without an extension.

Answer 3

Adding the following line code to the configuration kit, it works for me

 bundles.IgnoreList.Clear(); 

Follow the link for a more detailed explanation.

Answer 4

For me, updating the version of System.Web.Optimization to version 1.1.0.0 was fixed. When I was in version 1.0.0.0, it never allowed the .map file in a subdirectory (that is, correctly minimizing and linking scripts in a subdirectory)

Answer 5

Whenever I set debug = "off" in my web.config and run the mvc4 application, I get ...

<script src="/bundles/jquery?v=<some long string>"></script>

in my html code and javascript error

Expected ';'

There were 2 ways to get rid of javascript error

• set BundleTable.EnableOptimizations = false to BundleConfig.cs

OR

2. I ended up using NuGet Package Manager to update WebGrease.dll. It works fine if debug = "true" or debug = "false".

Answer 6

I used Identity2, then the scripts were not loaded for an anonymous user, then I add this code in webconfig and in words.

 <location path="bundles"> <system.web> <authorization> <allow users="*" /> </authorization> </system.web> </location> 

Answer 7

add this action to your global file.

 protected void Application_Start() { BundleConfig.RegisterBundles(BundleTable.Bundles); } 

Answer 8

What you need to check when enabling optimization kit;

 BundleTable.EnableOptimizations = true; 

as well as

 webconfig debug = "false" 

1. the bundles.IgnoreList.Clear();

this will ignore the minimized resources of your packages, such as *.min.css or *.min.js which may cause an undefined error in your script. To fix this, replace the .min asset with the original one. if you do this, you may not need bundles.IgnoreList.Clear(); eg

 bundles.Add(new ScriptBundle("~/bundles/datatablesjs") .Include("~/Scripts/datatables.min.js") <---- change this to non minified ver. 

2. Make sure the package names of your css and js are unique.

   bundles.Add(new StyleBundle("~/bundles/datatablescss").Include(...) );

   bundles.Add(new ScriptBundle("~/bundles/datatablesjs").Include(...) );

3. Make sure you use the same Render @ Script.Render and Style.Render names in your package configuration. eg

   @Styles.Render("~/bundles/datatablescss")

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