0

AngularJS プロファイルとAngular Toastr プラグインを組み合わせた Grails 3 を使用しています。
アプリケーションを開発モードで実行すると、すべてが完全に機能しますが、アプリを (縮小せずに) バンドルすると、プラグインのテンプレートを読み込めなくなり、次のエラーが発生します。

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 コードが別のパスを持つ 1 つのファイルに連結されます。これにより、$templateCache を介した読み込みが中断されるようです。今、すべての templateUrls を絶対にすることは解決策ですが、相対 templateUrl を使用するプラグインでは、コードを変更せずにそれを行うことはできません。

それで、プラグインコードに触れずに、ここで実際に何が起こっているのか、どうすればこれを修正できるのか、誰か説明してもらえますか?

4

1 に答える 1

0

Angular 用の Grails アプリを生成すると、index.gsp に次の行が自動的に含まれることがわかりました。

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

これはwindow.contextPath、Angular の $templateCache を壊すプロダクション用にアプリがバンドルされるタイミングを設定します。

つまり、$templateCache からの設定window.contextPath = ""またはテンプレートの解決は失敗します。

于 2016-09-27T18:52:59.653 に答える