Ng-table: 模板未加载

我认为这个问题是https://github.com/esvit/ng-table/issues/957 的更清楚解释的副本：D

我的解决方法是手动将模板放入缓存中。

我从 ng-table.js 中取出 webpack 生成的部分并将其放入我的引导函数中。 令人惊讶的是，console.log 中$templateCache.get('ng-table/pager.html')的输出现在是模板字符串而不是承诺。

/* 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仅供参考

这如何影响捆绑包的大小？

在 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'复制到我的 webroot '~/ng-table/'的 ng-table 文件夹
不使用 webpack，使用 typescript w/o modules。 本质上只是一个编译的 ES5 应用程序。 （仍然试图弄清楚如何在非模块项目中注册类型，因为它们不是全局的或@types目录之外，因为我不能使用导入）

此外， 'ng-table/src/browser/date.html'丢失。
我从 npm 安装了 ng-table，它是 3.0.1 版

通过在我的 webpack.config.js 文件（使用 Webpack 3.11.0）中配置 Webpack，我设法在没有任何手动步骤的情况下加载模板：

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

这还需要安装ngtemplate-loader和html-loader NPM 包； 一旦完成，这个配置应该对使用 Webpack 3.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/将ng-table前缀添加到 ngtemplate- loader 编译它。 这导致 Angular 的模板缓存被预加载了ng-table/pager.html模板，因此当 ng-table 代码请求ng-table/pager.html模板时，Angular 会找到它并正确显示它。