Ng-table: لم يتم تحميل القالب

هذه المشكلة عبارة عن نسخة مكررة موضحة بشكل أكثر وضوحًا من https://github.com/esvit/ng-table/issues/957 أعتقد: D

الحل البديل بالنسبة لي هو وضع القوالب في ذاكرة التخزين المؤقت يدويًا.

آخذ جزء Webpack الذي تم إنشاؤه من ng-table.js وأضعه في وظيفة bootstrapping. من المثير للدهشة أن ناتج $templateCache.get('ng-table/pager.html') في console.log الآن هو سلسلة القالب وليس الوعد.

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

تضمين التغريدة

كيف يؤثر ذلك على حجم الحزمة؟

واجهت نفس المشكلات مع بعض قوالب html المفقودة عند استخدام ngTable مع Webpack 2.2. يبدو أن استيراد الوحدة النمطية ngTable من دليل / bundles يعمل بشكل صحيح. لكن هذا يشبه إلى حد كبير حلًا بديلًا في الوقت الحالي على ما أعتقد.

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

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

شكرًا Boosten ، لقد تكرهها رغم ذلك)

لدي هذه المسألة أيضا.
انتهى بي الأمر بنسخ ملفات html ومجلد عامل التصفية من 'ng-table/src/browser' إلى مجلد ng-table في webroot الخاص بي '~/ng-table/'
عدم استخدام حزمة الويب ، باستخدام وحدات مطبوعة بدون كتابة. في الأساس مجرد تطبيق ES5 مترجم. (ما زلت أحاول معرفة كيفية الحصول على كتابات للتسجيل في مشروع غير وحدة نمطية عندما لا تكون عامة أو خارج دليل types لأنني لا أستطيع استخدام الاستيراد)

أيضًا ، 'ng-table/src/browser/date.html' مفقود.
لقد قمت بتثبيت ng-table من npm وهو الإصدار 3.0.1

تمكنت من تحميل القوالب بدون أي خطوات يدوية ، من خلال تكوين Webpack بما يلي في ملف webpack.config.js الخاص بي (باستخدام Webpack 3.11.0):

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

يتطلب هذا أيضًا تثبيت حزمتي NPM 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 . و relativeTo=/src/browser/ جزءا من التكوين Webpack يتحول node_modules/ng_table/src/browser/pager.html إلى pager.html ، ثم prefix=ng-table/ يضيف ng-table بادئة إلى الاسم الذي ngtemplate- المحمل يجمعها مع. ينتج عن هذا تحميل ذاكرة التخزين المؤقت للقالب Angular مسبقًا بنموذج ng-table/pager.html ، وهكذا عندما يطلب رمز الجدول ng القالب ng-table/pager.html ، يعثر عليه Angular ويعرضه بشكل صحيح.