捆绑后相对 templateUrls 的 Angular $templateCache 404 错误答案

【问题标题】：Angular $templateCache 404 error for relative templateUrls after bundling捆绑后相对 templateUrls 的 Angular $templateCache 404 错误
【发布时间】：2016-09-24 12:16:51
【问题描述】：

我正在使用带有 AngularJS 配置文件的 Grails 3 以及 Angular Toastr plugin。
当我在开发模式下运行应用程序时，一切正常，但是当我捆绑应用程序（没有缩小）时，无法再加载插件中的模板，并且出现以下错误：

Error: [$compile:tpload] Failed to load template: directives/toast/toast.html (HTTP status: 404 Not Found)

我检查了捆绑的代码，发现了以下几行：

angular.module('toastr')
    .constant('toastrConfig', {
      allowHtml: false,
      autoDismiss: false,
      closeButton: false,
      closeHtml: '<button>&times;</button>',
      containerId: 'toast-container',
      extendedTimeOut: 1000,
      iconClasses: {
        error: 'toast-error',
        info: 'toast-info',
        success: 'toast-success',
        warning: 'toast-warning'
      },
      maxOpened: 0,
      messageClass: 'toast-message',
      newestOnTop: true,
      onHidden: null,
      onShown: null,
      onTap: null,
      positionClass: 'toast-top-right',
      preventDuplicates: false,
      preventOpenDuplicates: false,
      progressBar: false,
      tapToDismiss: true,
      target: 'body',
      templates: {
        toast: 'directives/toast/toast.html',
        progressbar: 'directives/progressbar/progressbar.html'
      },
      timeOut: 5000,
      titleClass: 'toast-title',
      toastClass: 'toast'
    });

和

angular.module("toastr").run(["$templateCache", function($templateCache) {$templateCache.put("directives/progressbar/progressbar.html","<div class=\"toast-progress\"></div>\n");
$templateCache.put("directives/toast/toast.html","<div class=\"{{toastClass}} {{toastType}}\" ng-click=\"tapToast()\">\n  <div ng-switch on=\"allowHtml\">\n    <div ng-switch-default ng-if=\"title\" class=\"{{titleClass}}\" aria-label=\"{{title}}\">{{title}}</div>\n    <div ng-switch-default class=\"{{messageClass}}\" aria-label=\"{{message}}\">{{message}}</div>\n    <div ng-switch-when=\"true\" ng-if=\"title\" class=\"{{titleClass}}\" ng-bind-html=\"title\"></div>\n    <div ng-switch-when=\"true\" class=\"{{messageClass}}\" ng-bind-html=\"message\"></div>\n  </div>\n  <progress-bar ng-if=\"progressBar\"></progress-bar>\n</div>\n");}]);

看来模板在模板缓存中已正确初始化。

我尝试将 $templateCache 注入控制器并调用 $templateCache.get("directives/toast/toast.html")，这会返回正确的模板。

虽然我可以使用$templateCache.get(...) 访问它，但捆绑时模板未正确加载的原因可能是什么？
关于 $templateCache 的正确使用，我有什么遗漏吗？

PS：我注意到 angular-bootstrap 模板存在同样的问题

编辑我发现，当我使用绝对 templateUrls 时，一切正常，所以显然，我不完全理解相对 templateUrls 是如何工作的。
捆绑应用程序时，所有 JS 代码都连接到具有不同路径的单个文件中，这似乎会中断通过 $templateCache 的加载。现在，将所有 templateUrls 设为绝对是一个解决方案，但对于使用相对 templateUrl 的插件，我不能这样做，而无需更改其代码。

那么，谁能在不触及插件代码的情况下向我解释这里实际发生了什么以及如何解决这个问题？

【问题讨论】：

我也有同样的问题。请告诉我你是否已经解决了。我正在为 AngularJS 使用 Videogular，它使用 $templateCache 将模板放入缓存中，但它们实际上并未加载导致 404 错误的指令:(
我刚刚发布了我的解决方案...希望对您有所帮助...

标签： javascript angularjs grails bundling-and-minification angular-templatecache

【解决方案1】：

我发现，在为 Angular 生成 Grails 应用程序时，它会自动在 index.gsp 中包含以下几行：

<script type="text/javascript">
    window.contextPath = "${request.contextPath}";
</script>

这会在应用程序捆绑生产时设置window.contextPath，这会破坏 Angular $templateCache。

换句话说：设置window.contextPath = "" 否则来自$templateCache 的模板解析将失败。

【讨论】：