Ng-table: テンプレートがロードされていません

この問題は、 https ：

私の回避策は、テンプレートを手動でキャッシュに入れることです。

ng-table.jsからwebpackで生成された部分を取得し、ブートストラップ関数に入れます。 驚いたことに、console.logの$templateCache.get('ng-table/pager.html')の出力は、promiseではなくテンプレート文字列になりました。

/* 42 */
/* unknown exports provided */
/*!********************************!*\
  !*** ./src/browser/pager.html ***!
  \********************************/
/***/ function(module, exports, __webpack_require__) {

var path = 'ng-table/pager.html';
var html = "<div class=\"ng-cloak ng-table-pager\" ng-if=\"params.data.length\">\n    <div ng-if=\"params.settings().counts.length\" class=\"ng-table-counts btn-group pull-right\">\n        <button ng-repeat=\"count in params.settings().counts\" type=\"button\"\n                ng-class=\"{'active':params.count() == count}\"\n                ng-click=\"params.count(count)\" class=\"btn btn-default\">\n            <span ng-bind=\"count\"></span>\n        </button>\n    </div>\n    <ul ng-if=\"pages.length\" class=\"pagination ng-table-pagination\">\n        <li class=\"page-item\" ng-class=\"{'disabled': !page.active && !page.current, 'active': page.current}\" ng-repeat=\"page in pages\" ng-switch=\"page.type\">\n            <a class=\"page-link\" ng-switch-when=\"prev\" ng-click=\"params.page(page.number)\" href=\"\">&laquo;</a>\n            <a class=\"page-link\" ng-switch-when=\"first\" ng-click=\"params.page(page.number)\" href=\"\"><span ng-bind=\"page.number\"></span></a>\n            <a class=\"page-link\" ng-switch-when=\"page\" ng-click=\"params.page(page.number)\" href=\"\"><span ng-bind=\"page.number\"></span></a>\n            <a class=\"page-link\" ng-switch-when=\"more\" ng-click=\"params.page(page.number)\" href=\"\">&#8230;</a>\n            <a class=\"page-link\" ng-switch-when=\"last\" ng-click=\"params.page(page.number)\" href=\"\"><span ng-bind=\"page.number\"></span></a>\n            <a class=\"page-link\" ng-switch-when=\"next\" ng-click=\"params.page(page.number)\" href=\"\">&raquo;</a>\n        </li>\n    </ul>\n</div>\n";
var angular = __webpack_require__(/*! angular */ 0);
angular.module('ng').run(['$templateCache', function(c) { debugger; c.put(path, html) }]);
module.exports = path;

@faceleg FYI

それはバンドルサイズにどのように影響しますか？

Webpack 2.2でngTableを使用すると、いくつかのhtmlテンプレートが欠落しているという同じ問題が発生しました。 / bundlesディレクトリからのngTableモジュールのインポートは正しく機能しているようです。 しかし、これは今のところ回避策のようなものだと思います。

import { ngTableModule } from 'ng-table/bundles/ng-table';

angular.module('myapp', [
    ngTableModule.name
]);

@Boostenに感謝し

私にもこの問題があります。
htmlファイルとフィルターフォルダーを'ng-table/src/browser'からWebルート'~/ng-table/' ng-tableフォルダーにコピーすることになりました。
webpackを使用せず、モジュールなしのtypescriptを使用します。 基本的には、コンパイルされたES5アプリだけです。 （インポートを使用できないため、タイピングがグローバルでない場合、または

また、 'ng-table/src/browser/date.html'がありません。
npmからng-tableをインストールしましたが、バージョン3.0.1です。

webpack.config.jsファイルで次のようにWebpackを構成することにより、手動の手順なしでテンプレートをロードすることができました（Webpack 3.11.0を使用）。

    module: {
      rules: [
        // ...
        { test: /ng-table\/.*\.html$/, use: ['ngtemplate-loader?requireAngular&relativeTo=/src/browser/&prefix=ng-table/', 'html-loader'] }
      ]
    }

これには、 ngtemplate-loaderおよびhtml-loader NPMパッケージもインストールする必要があります。 それが完了すると、この設定はWebpack3.xを使用している他の人にとってはそのまま機能するはずです。 （Webpack 2.xまたは4.xの場合、同様の行が機能するはずですが、Webpack構成ファイルの別の部分にある可能性があります）。 これにより、Webpackは次のようにテンプレートをvendor.bundle.jsファイルにコンパイルします。

/* 570 */
/***/ (function(module, exports, __webpack_require__) {

// Module
var code = "<div class=\"ng-cloak ng-table-pager\" ng-if=\"params.data.length\"> <div ng-if=\"params.settings().counts.length\" class=\"ng-table-counts btn-group pull-right\"> <button ng-repeat=\"count in params.settings().counts\" type=\"button\" ng-class=\"{'active':params.count() == count}\" ng-click=\"params.count(count)\" class=\"btn btn-default\"> <span ng-bind=\"count\"></span> </button> </div> <ul ng-if=\"pages.length\" class=\"pagination ng-table-pagination\"> <li class=\"page-item\" ng-class=\"{'disabled': !page.active && !page.current, 'active': page.current}\" ng-repeat=\"page in pages\" ng-switch=\"page.type\"> <a class=\"page-link\" ng-switch-when=\"prev\" ng-click=\"params.page(page.number)\" href=\"\">&laquo;</a> <a class=\"page-link\" ng-switch-when=\"first\" ng-click=\"params.page(page.number)\" href=\"\"><span ng-bind=\"page.number\"></span></a> <a class=\"page-link\" ng-switch-when=\"page\" ng-click=\"params.page(page.number)\" href=\"\"><span ng-bind=\"page.number\"></span></a> <a class=\"page-link\" ng-switch-when=\"more\" ng-click=\"params.page(page.number)\" href=\"\">&#8230;</a> <a class=\"page-link\" ng-switch-when=\"last\" ng-click=\"params.page(page.number)\" href=\"\"><span ng-bind=\"page.number\"></span></a> <a class=\"page-link\" ng-switch-when=\"next\" ng-click=\"params.page(page.number)\" href=\"\">&raquo;</a> </li> </ul> </div> ";
// Exports
var _module_exports = code;;
var path = 'ng-table/pager.html';
var angular = __webpack_require__(0);
angular.module('ng').run(['$templateCache', function(c) { c.put(path, _module_exports) }]);
module.exports = path;

/***/ }),

パスがng-table/pager.html注意してください。 Webpack構成のrelativeTo=/src/browser/部分は、 node_modules/ng_table/src/browser/pager.htmlをpager.htmlに変換し、 prefix=ng-table/はそのngtemplate-の名前にng-tableプレフィックスを追加します。ローダーはそれをでコンパイルします。 これにより、Angularのテンプレートキャッシュにng-table/pager.htmlテンプレートがプリロードされるため、ng-tableコードがng-table/pager.htmlテンプレートを要求すると、Angularはそれを見つけて正しく表示します。