缩小 JS 时，Angular 模板返回 404答案

【问题标题】：Angular templates return 404 when JS is minified缩小 JS 时，Angular 模板返回 404
【发布时间】：2014-06-27 06:55:50
【问题描述】：

我们将 Angular 与 ASP.NET MVC 结合使用。

我们也在使用 ui-bootstrap（或 AngularUI）。

带有 ui-bootstrap 的控件的模式是所有的 html 模板都是使用 $templateCache.put() 设置的，包括我添加的一个自定义模板。

我们所有的脚本都使用 ASP.NET 的 BundleCollection 进行捆绑。对于发布版本，JS 文件也会被缩小。

问题是：一切都很好，无需缩小。但是，当 JS 为发布版本缩小时，浏览器在尝试从服务器下载模板文件（“template/control/control.html”）后收到 404 错误。这些文件不在服务器上，但应该只是从模板缓存中获取。

有什么建议吗？我可以提供更多细节，但我不确定哪些细节很重要。

详情

大部分模板（包括一个无法解析的模板）都在 ui-bootstrap 的 ui-bootstrap-tmpls 文件中。

我确实创建了一个自定义模板。此模板位于名为“customAngularBootstrapTemplates.js”的文件中。首先，这里是我的 BundleCollection 配置的一些快照：

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

这是我的模板文件，供记录：

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" +
      "");
}]);

来自 Chrome 的控制台错误：

“加载资源失败：服务器响应状态为 404（未找到）http://www.mydomain.com/url/template/datepicker/datepicker.html”

“加载资源失败：服务器响应状态为 404（未找到）http://www.mydomain.com/url/template/datepicker/popup.html”

"错误：[$compile:tpload] http://errors.angularjs.org/1.2.2/$compile/tpload?p0=template%2Fdatepicker%2Fdatepicker.html 在错误（本机）在http://www.mydomain.com/bundles/clientside_frameworks?v-ugF3A5jxJI7816t_MmfA0Oju5BGizHxJtDkkK1q72HI1:1:447 ... ……”

...还有一个编译错误。

【问题讨论】：

我建议提供将模板添加到缓存中的代码的过去。
您能否提供控制台中的错误信息？我在使用 Angular 的 BundleTransformer nuGet 包时遇到了问题（缩小重命名 $scope、$http 等），但看起来这可能不是您的问题（您的代码是如何编写的）。
嗯...您是否将模块声明为您的主模块/应用程序的依赖项？
像这样：var myModule = angular.module("myModule", ['ngSanitize', 'ui.bootstrap']);

标签： javascript asp.net angularjs twitter-bootstrap templates

【解决方案1】：

经过一番痛苦，我似乎找到了解决办法。

将其放入捆绑配置中：

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

不够好。 cdn路径只解析JS，不解析UIBootstrap模板文件。

一旦我将其更改为：

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"));

【讨论】：