Ng-table: Template tidak dimuat

Dibuat pada 10 Feb 2017 · 7Komentar · Sumber: esvit/ng-table

Saya memperbarui aplikasi saya untuk menggunakan Webpack 2. Meskipun ngtable berfungsi dengan baik jika dimuat dengan webpack 1, saya mengalami masalah saat memuat dengan webpack 2.

Konsol browser menampilkan GET http://app.finderbox.dev/app/ng-table/pager.html 404 (Not Found) . Dalam komponen yang memuat tabel, saya menetapkan beberapa keluaran log:

$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}

Tampaknya ngtable memuat templat dengan ID yang berbeda.
@TheLarkInn : apakah menurut Anda itu bisa menjadi kesalahan di sisi webpack?
@faceleg : apakah itu terkait dengan masalah Anda https://github.com/esvit/ng-table/issues/957 ?

Sumber

richtmat

👍3

Komentar yang paling membantu

Saya memiliki masalah yang sama dengan beberapa template html yang hilang saat menggunakan ngTable dengan Webpack 2.2. Mengimpor modul ngTable dari direktori /bundles tampaknya berfungsi dengan baik. Tapi ini lebih seperti solusi untuk saat ini kurasa.

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

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

kevinboosten pada 20 Feb 2017

👍6

Semua 7 komentar

Masalah ini adalah duplikat yang jauh lebih jelas dijelaskan dari https://github.com/esvit/ng-table/issues/957 Saya pikir: D

faceleg pada 12 Feb 2017

Solusi bagi saya adalah meletakkan templat di cache secara manual.

Saya mengambil bagian yang dihasilkan webpack dari ng-table.js dan memasukkannya ke dalam fungsi bootstrap saya. Anehnya output $templateCache.get('ng-table/pager.html') di console.log sekarang adalah string template daripada janji.

/* 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 pada 13 Feb 2017

Bagaimana pengaruhnya terhadap ukuran bundel?

faceleg pada 13 Feb 2017

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

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

kevinboosten pada 20 Feb 2017

👍6

Terima kasih @Boosten , ini berhasil untuk saya (typescript membencinya)

faceleg pada 24 Apr 2017

Saya memiliki masalah ini juga.
Saya akhirnya menyalin file html dan memfilter folder dari 'ng-table/src/browser' ke folder tabel-ng di webroot saya '~/ng-table/'
Tidak menggunakan webpack, menggunakan TypeScript tanpa modul. Pada dasarnya hanya aplikasi ES5 yang dikompilasi. (Masih mencoba mencari cara untuk mendapatkan pengetikan untuk didaftarkan dalam proyek non-modul ketika mereka tidak global atau di luar direktori @types karena saya tidak dapat menggunakan impor)

Juga, 'ng-table/src/browser/date.html' hilang.
Saya menginstal ng-table dari npm dan ini adalah versi 3.0.1

daerogami pada 19 Apr 2018

Saya berhasil memuat template tanpa langkah manual apa pun, dengan mengonfigurasi Webpack dengan yang berikut ini di file webpack.config.js saya (menggunakan Webpack 3.11.0):

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

Ini juga membutuhkan paket NPM ngtemplate-loader dan html-loader untuk diinstal; setelah selesai, konfigurasi ini akan berfungsi apa adanya untuk orang lain yang menggunakan Webpack 3.x. (Untuk Webpack 2.x atau 4.x, baris serupa akan berfungsi tetapi mungkin di bagian berbeda dari file konfigurasi Webpack). Ini menyebabkan Webpack mengkompilasi template ke dalam file vendor.bundle.js sebagai berikut:

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

/***/ }),

Perhatikan bagaimana jalannya ng-table/pager.html . Bagian relativeTo=/src/browser/ dari konfigurasi Webpack mengubah node_modules/ng_table/src/browser/pager.html menjadi pager.html , dan kemudian prefix=ng-table/ menambahkan awalan ng-table ke nama yang ngtemplate- loader mengkompilasinya dengan. Ini menghasilkan cache template Angular yang dimuat sebelumnya dengan template ng-table/pager.html , dan ketika kode ng-table meminta template ng-table/pager.html , Angular menemukannya dan menampilkannya dengan benar.