javascript - 捆绑后相对 templateUrls 的 Angular $templateCache 404 错误

Question

我正在使用带有 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");}]);

所以看起来模板在模板缓存中正确初始化。

我尝试在 Controller 中注入(inject) $templateCache 并调用 $templateCache.get("directives/toast/toast.html")这将返回正确的模板。

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

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

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

那么，任何人都可以向我解释这里实际发生了什么以及我如何解决这个问题，而无需触及插件代码？

Answer 1

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

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

这将设置 window.contextPath当应用程序被捆绑用于破坏 Angular $templateCache 的生产时。

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