javascript - 缩小 JS 时 Angular 模板返回 404

Question

我们将 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 出错时( native ) 在 http://www.mydomain.com/bundles/clientside_frameworks?v-ugF3A5jxJI7816t_MmfA0Oju5BGizHxJtDkkK1q72HI1:1:447...……”

... 又一个编译错误。

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