Estou atualizando meu aplicativo para usar o Webpack 2. Enquanto o ngtable está funcionando bem se carregado com o webpack 1, tenho um problema ao carregar com o webpack 2.
O console do navegador mostra GET http://app.finderbox.dev/app/ng-table/pager.html 404 (Not Found)
. No componente que carrega a tabela, defino algumas saídas de registro:
$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}
Parece que o ngtable carrega modelos com um ID diferente.
@TheLarkInn : você acha que pode ser um erro do lado do webpack?
@faceleg : isso está relacionado ao seu problema https://github.com/esvit/ng-table/issues/957 ?
Este problema é uma duplicata muito mais claramente explicada de https://github.com/esvit/ng-table/issues/957 Eu acho: D
A solução alternativa para mim é colocar os modelos no cache manualmente.
Pego a parte gerada pelo webpack do ng-table.js e coloco em minha função de inicialização. Surpreendentemente, a saída de $templateCache.get('ng-table/pager.html')
no console.log agora é a string do modelo em vez de uma promessa.
/* 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
Como isso afeta o tamanho do pacote?
Tive os mesmos problemas com alguns modelos de html ausentes ao usar o ngTable com Webpack 2.2. A importação do módulo ngTable do diretório / bundles parece estar funcionando corretamente. Mas isso é mais como uma solução alternativa por enquanto, eu acho.
import { ngTableModule } from 'ng-table/bundles/ng-table';
angular.module('myapp', [
ngTableModule.name
]);
Obrigado @Boosten , funcionou para mim (a digitação detesta, no entanto)
Eu também tenho esse problema.
Acabei copiando os arquivos html e a pasta de filtros de 'ng-table/src/browser'
para uma pasta ng-table em meu webroot '~/ng-table/'
Não usando webpack, usando typescript sem módulos. Essencialmente, apenas um aplicativo ES5 compilado. (Ainda estou tentando descobrir como fazer com que as tipificações sejam registradas em um projeto não-módulo quando elas não são globais ou fora do diretório @types , pois não posso usar o import)
Além disso, 'ng-table/src/browser/date.html'
está faltando.
Eu instalei o ng-table do npm e é a versão 3.0.1
Consegui carregar os modelos sem nenhuma etapa manual, configurando o Webpack com o seguinte em meu arquivo webpack.config.js (usando Webpack 3.11.0):
module: {
rules: [
// ...
{ test: /ng-table\/.*\.html$/, use: ['ngtemplate-loader?requireAngular&relativeTo=/src/browser/&prefix=ng-table/', 'html-loader'] }
]
}
Isso também requer que os pacotes ngtemplate-loader
e html-loader
NPM sejam instalados; uma vez feito isso, esta configuração deve funcionar como está para qualquer outra pessoa que use o Webpack 3.x. (Para Webpack 2.x ou 4.x, uma linha semelhante deve funcionar, mas talvez em uma parte diferente do arquivo de configuração do Webpack). Isso faz com que o Webpack compile os modelos em meu arquivo vendor.bundle.js
seguinte maneira:
/* 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;
/***/ }),
Observe como o caminho é ng-table/pager.html
. A parte relativeTo=/src/browser/
da configuração do Webpack transforma node_modules/ng_table/src/browser/pager.html
em pager.html
e, em seguida, prefix=ng-table/
adiciona o prefixo ng-table
ao nome que ngtemplate- loader o compila com. Isso resulta no cache do modelo do Angular sendo pré-carregado com um modelo ng-table/pager.html
e, portanto, quando o código da tabela ng solicita o modelo ng-table/pager.html
, o Angular o encontra e o exibe corretamente.
Comentários muito úteis
Tive os mesmos problemas com alguns modelos de html ausentes ao usar o ngTable com Webpack 2.2. A importação do módulo ngTable do diretório / bundles parece estar funcionando corretamente. Mas isso é mais como uma solução alternativa por enquanto, eu acho.