Ng-table: La plantilla no está cargada

Este problema es un duplicado mucho más claramente explicado de https://github.com/esvit/ng-table/issues/957 Creo: D

La solución para mí es poner las plantillas en el caché manualmente.

Tomo la parte generada por el paquete web de ng-table.js y la pongo en mi función de arranque. Sorprendentemente, la salida de $templateCache.get('ng-table/pager.html') en console.log ahora es la cadena de plantilla en lugar de una promesa.

/* 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

¿Cómo afecta eso al tamaño del paquete?

Tuve los mismos problemas con algunas plantillas html faltantes al usar ngTable con Webpack 2.2. La importación del módulo ngTable del directorio / bundles parece funcionar correctamente. Pero esto es más como una solución por ahora, supongo.

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

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

Gracias @Boosten , esto funcionó para mí (aunque mecanografiado lo odia)

Yo también tengo este problema.
Terminé copiando archivos html y carpeta de filtro de 'ng-table/src/browser' a una carpeta ng-table en mi webroot '~/ng-table/'
No usar webpack, usar mecanografiado sin módulos. Esencialmente solo una aplicación ES5 compilada. (Todavía estoy tratando de averiguar cómo hacer que las mecanografías se registren en un proyecto que no es un módulo cuando no son globales o están fuera del directorio @types , ya que no puedo usar la importación)

Además, falta 'ng-table/src/browser/date.html' .
Instalé ng-table desde npm y es la versión 3.0.1

Logré cargar las plantillas sin ningún paso manual, configurando Webpack con lo siguiente en mi archivo webpack.config.js (usando Webpack 3.11.0):

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

Esto también requiere que se instalen los paquetes ngtemplate-loader y html-loader NPM; una vez hecho esto, esta configuración debería funcionar como está para cualquier otra persona que use Webpack 3.x. (Para Webpack 2.xo 4.x, una línea similar debería funcionar, pero tal vez en una parte diferente del archivo de configuración de Webpack). Esto hace que Webpack compile las plantillas en mi archivo vendor.bundle.js la siguiente manera:

/* 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;

/***/ }),

Observe cómo la ruta es ng-table/pager.html . La parte relativeTo=/src/browser/ de la configuración del Webpack convierte node_modules/ng_table/src/browser/pager.html en pager.html , y luego prefix=ng-table/ agrega el prefijo ng-table al nombre que ngtemplate- loader lo compila con. Esto da como resultado que la caché de plantillas de Angular se cargue previamente con una plantilla ng-table/pager.html , por lo que cuando el código ng-table solicita la plantilla ng-table/pager.html , Angular la encuentra y la muestra correctamente.