Angular bundled/minified by MVC fails to load main module

Question

I've got an MVC 5 application that bundles up my angular app like such:

   var angular = new ScriptBundle("~/App")
            .Include("~/App/app.js")
            .IncludeDirectory("~/App", "*.js", true);

        bundles.Add(angular);

And then renders it in the head, after all other resources load, here:

(jquery, angular.min.js, other resources)
@Scripts.Render("~/App")

Open toggling my web.config's debug attribute to false:

    <compilation debug="false" targetFramework="4.5.2" />

The main module for my angular app will not load:

Error: [$injector:nomod] Module 'wdf' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Before you link me to documentation about how to ensure angular will load in minified form, know that I've already triple checked every single factory, controller, service [you name it], for the proper syntax outlined in AngularJS's documentation. I've also reduced my entire angular application down to a single file and a single line to eliminate possible other injection errors:

(function () {
'using strict';    

var app = angular.module('wdf', []);

})();

I've also always had the app stated as such in HTML:

 <!DOCTYPE html>
 <html ng-app="wdf" ng-strict-di>
 ...

The application runs completely fine un-minified, even with ng-strict-di . I've been wrestling with this for hours and hours. Every thread I can dig up essentially tells me to ensure I've declared all of the module's dependencies right, but I'm pretty sure I have considering:

ng-strict-di hasn't caught anything I should have coded better
I've triple checked every friggin' file to ensure I've followed best practice for minification
And finally, the app doesn't even work it's most simplest form

score 0 · Answer 1 · edited May 23 '17 at 12:31

Son of a.... of course, right I post, I find the issue.

I had failed to look at the developer tools to see if the site was properly loading the minified file. It was returning 403 for the bundled request. The solution outlined here with a style bundle worked the same. MVC4 style bundle giving 403

In summary, the fix was this change:

FROM var angular = new ScriptBundle("~/App")

TO var angular = new ScriptBundle("~/wdf")

and then changing it the HTML as well: @Scripts.Render("~/wdf")

Hopefully this helps someone else who runs into the issue...

Angular bundled/minified by MVC fails to load main module

1 Answers1