Ng-table: Шаблон не загружен

Созданный на 10 февр. 2017 · 7Комментарии · Источник: esvit/ng-table

Я обновляю свое приложение, чтобы использовать Webpack 2. Хотя ngtable работает нормально при загрузке с помощью webpack 1, у меня возникают проблемы при загрузке с помощью webpack 2.

В консоли браузера отображается GET http://app.finderbox.dev/app/ng-table/pager.html 404 (Not Found) . В компоненте, загружающем таблицу, я установил вывод журнала:

$templateCache.get('http://app.finderbox.dev/app/ng-table/pager.html'):  undefined
$templateCache.get('http://app.finderbox.dev/ng-table/pager.html'):  undefined
$templateCache.get('ng-table/pager.html'):  Promise {$$state: Object}

Похоже, что ngtable загружает шаблоны с другим идентификатором.
@TheLarkInn : как вы думаете, это может быть ошибка на стороне веб-пакета?
@faceleg : это связано с вашей проблемой https://github.com/esvit/ng-table/issues/957 ?

Источник

richtmat

👍3

Самый полезный комментарий

У меня были те же проблемы с некоторыми отсутствующими шаблонами html при использовании ngTable с Webpack 2.2. Кажется, что импорт модуля ngTable из каталога / bundles работает правильно. Но я думаю, что на данный момент это больше похоже на обходной путь.

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

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

kevinboosten 20 февр. 2017

👍6

Все 7 Комментарий

Эта проблема - гораздо более четко объясненный дубликат https://github.com/esvit/ng-table/issues/957, я думаю: D

faceleg 12 февр. 2017

Для меня обходной путь - вручную поместить шаблоны в кеш.

Я беру часть, сгенерированную веб-пакетом, из ng-table.js и помещаю ее в свою функцию начальной загрузки. Удивительно, но вывод $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;

@faceleg FYI

richtmat 13 февр. 2017

Как это повлияет на размер пакета?

faceleg 13 февр. 2017

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

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

kevinboosten 20 февр. 2017

👍6

Спасибо @Boosten , это сработало для меня (хотя машинописный текст ненавидит)

faceleg 24 апр. 2017

У меня тоже есть эта проблема.
Я закончил тем, что скопировал html-файлы и папку с фильтрами из 'ng-table/src/browser' в папку ng-table в моем webroot '~/ng-table/'
Не использовать веб-пакет, используя машинописный текст без модулей. По сути, это просто скомпилированное приложение ES5. (Все еще пытаюсь выяснить, как получить регистрацию типов в немодульном проекте, если они не являются глобальными или находятся за пределами каталога @types, поскольку я не могу использовать импорт)

Также отсутствует 'ng-table/src/browser/date.html' .
Я установил ng-table из npm, и это версия 3.0.1

daerogami 19 апр. 2018

Мне удалось загрузить шаблоны без каких-либо ручных действий, настроив 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'] }
      ]
    }

Это также требует установки пакетов 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-table запрашивает шаблон ng-table/pager.html , Angular находит его и правильно отображает.