Angular templates return 404 when JS is minified

Question

We are using Angular with ASP.NET MVC.

We are also using ui-bootstrap (or AngularUI).

The pattern for controls with ui-bootstrap is that all of the html templates are set using $templateCache.put() , including the one custom template that I added.

All of our scripts are being bundled using ASP.NET's BundleCollection. For release builds, the JS files are minified as well.

Here is the problem: Everything works great without minification. When the JS is minified for the release build, however, the browser is getting a 404 error after trying to download the template files ("template/control/control.html") from the server. These files aren't on the server but are supposed to be simply picked up from the template cache.

Any suggestions? I can provide more detail, but I'm not sure what details are important yet.

Details

Most of the templates (including one template that is failing to resolve) are inside of the ui-bootstrap-tmpls file from ui-bootstrap.

I did create one custom template. This template is in a file called "customAngularBootstrapTemplates.js". First, here are some snapshots of my BundleCollection configuration:

bundles.Add(new ScriptBundle("~/bundles/clientside_frameworks").Include(
            "~/Scripts/angular.js",
            "~/Scripts/angular-sanitize.js"
            // Plus other frameworks (lodash, etc)
        ));

bundles.Add(new ScriptBundle("~/bundles/bootstrap", bootstrapJS_CdnPath).Include(
            "~/Scripts/bootstrap*"));

bundles.Add(new ScriptBundle("~/bundles/bootstrap-ui", ui_bootstrap_CdnPath).Include(
            "~/Scripts/ui-bootstrap*"));

// ... A few other references

bundles.Add(new ScriptBundle("~/bundles/myAngularJS").Include(
            "~/Scripts/MyAngular/MyModule.js",
            "~/Scripts/MyAngular/*.js")); // Matches the custom template file

Here's my template file, for the record:

angular.module("template/datepicker/datepicker.html", []).run(["$templateCache", function ($templateCache) {
    $templateCache.put("template/datepicker/datepicker.html",
      "<table>\n" +
      "  <thead>\n" +
      "    <tr>\n" +
      "      <th><button type=\"button\" class=\"btn btn-default btn-sm pull-left\" ng-click=\"move(-1)\"><i class=\"fa fa-chevron-left\"></i></button></th>\n" +
      "      <th colspan=\"{{rows[0].length - 2 + showWeekNumbers}}\"><button type=\"button\" class=\"btn btn-default btn-sm btn-block\" ng-click=\"toggleMode()\"><strong>{{title}}</strong></button></th>\n" +
      "      <th><button type=\"button\" class=\"btn btn-default btn-sm pull-right\" ng-click=\"move(1)\"><i class=\"fa fa-chevron-right\"></i></button></th>\n" +
      "    </tr>\n" +
      "    <tr ng-show=\"labels.length > 0\" class=\"h6\">\n" +
      "      <th ng-show=\"showWeekNumbers\" class=\"text-center\">#</th>\n" +
      "      <th ng-repeat=\"label in labels\" class=\"text-center\">{{label}}</th>\n" +
      "    </tr>\n" +
      "  </thead>\n" +
      "  <tbody>\n" +
      "    <tr ng-repeat=\"row in rows\">\n" +
      "      <td ng-show=\"showWeekNumbers\" class=\"text-center\"><em>{{ getWeekNumber(row) }}</em></td>\n" +
      "      <td ng-repeat=\"dt in row\" class=\"text-center\">\n" +
      "        <button type=\"button\" style=\"width:100%;\" class=\"btn btn-default btn-sm\" ng-class=\"{'btn-info': dt.selected}\" ng-click=\"select(dt.date)\" ng-disabled=\"dt.disabled\"><span ng-class=\"{'text-muted': dt.secondary}\">{{dt.label}}</span></button>\n" +
      "      </td>\n" +
      "    </tr>\n" +
      "  </tbody>\n" +
      "</table>\n" +
      "");
}]);

Console errors from Chrome:

"Failed to load resource: the server responded with a status of 404 (Not Found) http://www.mydomain.com/url/template/datepicker/datepicker.html "

"Failed to load resource: the server responded with a status of 404 (Not Found) http://www.mydomain.com/url/template/datepicker/popup.html "

"Error: [$compile:tpload] http://errors.angularjs.org/1.2.2/ $compile/tpload?p0=template%2Fdatepicker%2Fdatepicker.html at Error (native) at http://www.mydomain.com/bundles/clientside_frameworks?v-ugF3A5jxJI7816t_MmfA0Oju5BGizHxJtDkkK1q72HI1:1:447 ... ..."

... one more compile error.

Answer 1

After much pain, it appears that I have found a solution.

Putting this in the bundle config:

bundles.Add(new ScriptBundle("~/bundles/bootstrap-ui", ui_bootstrap_CdnPath).Include(
            "~/Scripts/ui-bootstrap*"));

Is not good enough. The cdn path only resolves the JS, but not the UIBootstrap template file.

Everything seems to be working once I changed this to:

bundles.Add(new ScriptBundle("~/bundles/bootstrap-ui", ui_bootstrap_CdnPath).Include(
            "~/Scripts/ui-bootstrap-0.10.0.min.js"));

bundles.Add(new ScriptBundle("~/bundles/bootstrap-ui-templates", ui_bootstrap_templates_CdnPath).Include(
            "~/Scripts/ui-bootstrap-tpls-0.10.0.min.js"));