0

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

을 그 템플릿 A를 템플릿 캐시에서 올바르게 초기화됩니다.

컨트롤러에 $ templateCache를 삽입하고 $templateCache.get("directives/toast/toast.html")을 호출했는데 정확한 템플릿이 반환됩니다.

$templateCache.get(...)으로 액세스 할 수 있지만 템플릿을 묶어서 올바르게로드하지 못한 이유가 무엇일까요?
$ templateCache의 올바른 사용법에 대해 빠져있는 것이 있습니까?

PS : 나는 모든 것을 내가 완전히 이해하지 않기 때문에 분명히, 절대 templateUrls를 사용하는 경우, 작동, 내가 발견 각도 - 부트 스트랩 템플릿 같은 문제

편집을 언급 어떻게 상대 templateUrls가 작동합니다.
앱이 번들되면 모든 JS 코드가 다른 경로의 단일 파일로 연결되며 $ templateCache를 통해로드가 중단됩니다. 이제 모든 templateUrl을 절대적으로 만드는 것이 해결책이지만, 상대적인 templateUrl을 사용하는 플러그인에 대해서는 코드를 변경하지 않고 할 수 없습니다.

그래서 아무도 나에게 실제로 무슨 일이 일어나고 있는지, 그리고 플러그인 코드를 건드리지 않고이 문제를 어떻게 해결할 수 있는지 설명 할 수 있습니까?

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

이 응용 프로그램이 끊어하는 생산에 번들로 제공되는 window.contextPath을 설정

+0

동일한 문제가 있습니다. 당신이 해결했는지 말해주세요. AngularJS에 Videogular를 사용하고 있으며 $ templateCache를 사용하여 캐시에 템플릿을 저장하지만 실제로 404 오류를 발생시키는 지시문에로드되지 않습니다. ( – l1fe

+0

방금 ​​내 솔루션을 게시했습니다 ...이 도구가 도움이 될 수 있기를 바랍니다 .. . – Tobson

답변

0

나는 각도에 대한 Grails의 응용 프로그램을 생성 할 때, 그것은 자동으로의 index.gsp에서 다음 줄을 포함, 발견 각도 $ templateCache.

즉, window.contextPath = ""으로 설정하거나 $ templateCache의 템플릿 해상도가 실패합니다.