Ng-table: Vorlage ist nicht geladen

Dieses Problem ist ein viel klarer erklärtes Duplikat von https://github.com/esvit/ng-table/issues/957, denke ich: D

Abhilfe für mich besteht darin, die Vorlagen manuell in den Cache zu legen.

Ich nehme den Webpack-generierten Teil von ng-table.js und füge ihn in meine Bootstrapping-Funktion ein. Überraschenderweise ist die Ausgabe von $templateCache.get('ng-table/pager.html') in der console.log jetzt eher der Template-String als ein Versprechen.

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

Wie wirkt sich das auf die Bundle-Größe aus?

Ich hatte die gleichen Probleme mit einigen fehlenden HTML-Vorlagen bei der Verwendung von ngTable mit Webpack 2.2. Das Importieren des ngTable-Moduls aus dem /bundles-Verzeichnis scheint ordnungsgemäß zu funktionieren. Aber das ist jetzt eher ein Workaround, denke ich.

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

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

Danke @Boosten , das hat bei mir funktioniert (Typoskript hasst es aber)

Ich habe dieses Problem auch.
Am Ende habe ich HTML-Dateien und Filterordner von 'ng-table/src/browser' in einen ng-table-Ordner in meinem Webroot '~/ng-table/' kopiert
Kein Webpack verwenden, Typescript ohne Module verwenden. Im Wesentlichen nur eine kompilierte ES5-App. (Ich versuche immer noch herauszufinden, wie man Eingaben dazu bringt, sich in einem Nicht-Modul-Projekt zu registrieren, wenn sie nicht global oder außerhalb des @types- Verzeichnisses sind, da ich den Import nicht verwenden kann)

Außerdem fehlt 'ng-table/src/browser/date.html' .
Ich habe ng-table von npm installiert und es ist Version 3.0.1

Ich habe es geschafft, die Vorlagen ohne manuelle Schritte zu laden, indem ich Webpack mit dem folgenden in meiner Datei webpack.config.js konfiguriert habe (mit Webpack 3.11.0):

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

Dazu müssen auch die NPM-Pakete ngtemplate-loader und html-loader installiert sein; Sobald dies erledigt ist, sollte diese Konfiguration für alle anderen Benutzer von Webpack 3.x unverändert funktionieren. (Für Webpack 2.x oder 4.x sollte eine ähnliche Zeile funktionieren, aber möglicherweise in einem anderen Teil der Webpack-Konfigurationsdatei). Dies veranlasst Webpack, die Vorlagen wie folgt in meine vendor.bundle.js Datei zu kompilieren:

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

/***/ }),

Beachten Sie, dass der Pfad ng-table/pager.html lautet. Der relativeTo=/src/browser/ Teil der Webpack Config dreht node_modules/ng_table/src/browser/pager.html in pager.html und dann prefix=ng-table/ die fügt ng-table auf den Namen Präfix , das ngtemplate- loader kompiliert es mit. Dies führt dazu, dass der Vorlagen-Cache von Angular mit einer ng-table/pager.html Vorlage vorgeladen wird. Wenn der ng-Tabellencode die ng-table/pager.html Vorlage anfordert, findet Angular sie und zeigt sie korrekt an.