Ng-table: टेम्पलेट लोड नहीं है

यह समस्या https://github.com/esvit/ng-table/issues/957 का अधिक स्पष्ट रूप से समझाया गया डुप्लिकेट है, मुझे लगता है: डी

मेरे लिए वर्कअराउंड टेम्प्लेट को कैश में मैन्युअल रूप से रखना है।

मैं ng-table.js से वेबपैक जेनरेट किया गया हिस्सा लेता हूं और इसे अपने बूटस्ट्रैपिंग फ़ंक्शन में डालता हूं। हैरानी की बात है कि कंसोल.लॉग में $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;

@फेसलेग एफवाईआई

यह बंडल आकार को कैसे प्रभावित करता है?

वेबपैक 2.2 के साथ एनजीटेबल का उपयोग करते समय मेरे पास कुछ लापता एचटीएमएल टेम्पलेट्स के साथ एक ही समस्या थी। ऐसा लगता है कि एनजीटेबल मॉड्यूल को / बंडल निर्देशिका से आयात करना ठीक से काम कर रहा है। लेकिन यह मुझे लगता है कि अभी के लिए कामकाज की तरह है।

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

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

धन्यवाद @ बूस्टन , यह मेरे लिए काम करता है (टाइपस्क्रिप्ट हालांकि इसे नफरत करता है)

मेरे पास भी यह मुद्दा है।
मैंने अपने वेबूट '~/ng-table/' 'ng-table/src/browser' से एक एनजी-टेबल फ़ोल्डर में html फ़ाइलों और फ़िल्टर फ़ोल्डर की प्रतिलिपि बनाना समाप्त कर दिया
टाइपप्रति w/o मॉड्यूल का उपयोग करके, वेबपैक का उपयोग नहीं करना। अनिवार्य रूप से सिर्फ एक संकलित ES5 ऐप। (फिर भी यह पता लगाने की कोशिश की जा रही है कि गैर-मॉड्यूल प्रोजेक्ट में पंजीकरण करने के लिए टाइपिंग कैसे प्राप्त करें जब वे वैश्विक नहीं हैं या @types निर्देशिका के बाहर हैं क्योंकि मैं आयात का उपयोग नहीं कर सकता)

साथ ही, 'ng-table/src/browser/date.html' गायब है।
मैंने npm से एनजी-टेबल स्थापित किया है और यह संस्करण 3.0.1 . है

मैं वेबपैक को मेरी webpack.config.js फ़ाइल (वेबपैक 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 संकुल को संस्थापित करने की भी आवश्यकता है; एक बार यह हो जाने के बाद, यह कॉन्फिगर वेबपैक 3.x का उपयोग करने वाले किसी और के लिए काम करना चाहिए। (वेबपैक 2.x या 4.x के लिए, एक समान लाइन को काम करना चाहिए लेकिन शायद वेबपैक कॉन्फिग फ़ाइल के एक अलग हिस्से में)। यह वेबपैक को मेरी 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 । वेबपैक कॉन्फिग का relativeTo=/src/browser/ हिस्सा node_modules/ng_table/src/browser/pager.html को pager.html , और फिर prefix=ng-table/ के साथ ng-table उपसर्ग जोड़ता है जो ngtemplate- लोडर इसके साथ संकलित करता है। इसके परिणामस्वरूप एंगुलर का टेम्प्लेट कैश ng-table/pager.html टेम्प्लेट के साथ प्री-लोडेड होता है, और इसलिए जब एनजी-टेबल कोड ng-table/pager.html टेम्प्लेट का अनुरोध करता है, तो एंगुलर इसे ढूंढता है और इसे सही ढंग से प्रदर्शित करता है।