ng-table
ng-table copied to clipboard
Template is not loaded
I'm updating my app to use Webpack 2. While ngtable is working fine if loaded with webpack 1, I experience an issue while loading with webpack 2.
The browser console shows GET http://app.finderbox.dev/app/ng-table/pager.html 404 (Not Found)
. In the component loading the table I set some log output:
$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}
It seems to be that ngtable loads templates with a different ID. @TheLarkInn: do you think that it could be an error on the webpack side? @faceleg: is that related to your issue https://github.com/esvit/ng-table/issues/957?
This issue is a much more clearly explained duplicate of https://github.com/esvit/ng-table/issues/957 I think :D
Workaround for me is to put the templates in the cache manually.
I take the webpack generated part from ng-table.js and put it into my bootstrapping function. Surprisingly the output of $templateCache.get('ng-table/pager.html')
in the console.log now is the template string rather than a promise.
/* 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=\"\">«</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=\"\">…</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=\"\">»</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
How does that affect bundle size?
I had the same issues with some missing html templates when using ngTable with Webpack 2.2. Importing the ngTable module from the /bundles directory seems to be working properly. But this is more like a workaround for now I guess.
import { ngTableModule } from 'ng-table/bundles/ng-table';
angular.module('myapp', [
ngTableModule.name
]);
Thanks @Boosten, this worked for me (typescript hates it though)
I have this issue as well.
I ended up copying html files and filter folder from 'ng-table/src/browser'
to an ng-table folder in my webroot '~/ng-table/'
Not using webpack, using typescript w/o modules. Essentially just a compiled ES5 app. (Still trying to figure out how to get typings to register in a non-module project when they aren't global or outside of @types directory since I cant use import)
Also, 'ng-table/src/browser/date.html'
is missing.
I installed ng-table from npm and it is version 3.0.1
I managed to get the templates loading without any manual steps, by configuring Webpack with the following in my webpack.config.js file (using Webpack 3.11.0):
module: {
rules: [
// ...
{ test: /ng-table\/.*\.html$/, use: ['ngtemplate-loader?requireAngular&relativeTo=/src/browser/&prefix=ng-table/', 'html-loader'] }
]
}
This also requires the ngtemplate-loader
and html-loader
NPM packages to be installed; once that is done, this config should work as-is for anyone else using Webpack 3.x. (For Webpack 2.x or 4.x, a similar line should work but maybe in a different part of the Webpack config file). This causes Webpack to compile the templates into my vendor.bundle.js
file as follows:
/* 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=\"\">«</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=\"\">…</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=\"\">»</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;
/***/ }),
Note how the path is ng-table/pager.html
. The relativeTo=/src/browser/
part of the Webpack config turns node_modules/ng_table/src/browser/pager.html
into pager.html
, and then prefix=ng-table/
adds the ng-table
prefix to the name that ngtemplate-loader compiles it with. This results in Angular's template cache being pre-loaded with an ng-table/pager.html
template, and so when the ng-table code requests the ng-table/pager.html
template, Angular finds it and displays it correctly.