綁定後的相對templateUrls的角度$ templateCache 404錯誤

我正在使用Grails 3和AngularJS配置文件以及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：我注意到角引導模板，同樣的問題

編輯我發現，一切正常，當我使用絕對templateUrls，所以很顯然，我不完全瞭解，如何相對templateUrls工作。
當應用程序捆綁在一起時，所有的JS代碼都連接到一個具有不同路徑的單個文件，這似乎通過$ templateCache打破了加載。現在，使所有的templateUrls絕對是一個解決方案，但我不能爲插件使用相關的templateUrl，而不更改它們的代碼。

那麼，有人可以向我解釋這裏發生了什麼，以及我如何解決這個問題，而無需觸摸插件代碼？

來源

2016-09-24 Tobson

我有同樣的問題。請告訴我，如果你已經解決了它。我爲AngularJS使用Videogular，它使用$ templateCache將模板放入緩存中，但它們實際上並沒有加載導致404錯誤的指令：錯誤:( – l1fe

我剛剛發佈了我的解決方案...希望這可以幫助你.. 。 – Tobson

我發現，即產生用於角Grails的應用程序時，它會自動包括在index.gsp中以下行：

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

這設定時，應用程序捆綁生產打破了該window.contextPath Angular $ templateCache。

換句話說：設置window.contextPath = ""或$ templateCache的模板分辨率將失敗。

來源

2016-09-27 18:52:59 Tobson

綁定後的相對templateUrls的角度$ templateCache 404錯誤

回答

相關問題