Ng-table: 템플릿이 로드되지 않았습니다.

이 문제는 https://github.com/esvit/ng-table/issues/957의 복제본으로 훨씬 더 명확하게 설명되어 있다고 생각합니다. :D

나를 위한 해결 방법은 템플릿을 캐시에 수동으로 넣는 것입니다.

ng-table.js에서 웹팩 생성 부분을 가져와 내 부트스트랩 기능에 넣습니다. 놀랍게도 이제 console.log에서 $templateCache.get('ng-table/pager.html') 의 출력은 약속이 아니라 템플릿 문자열입니다.

/* 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 참고로

번들 크기에 어떤 영향을 줍니까?

Webpack 2.2에서 ngTable을 사용할 때 일부 누락된 html 템플릿과 동일한 문제가 있었습니다. /bundles 디렉토리에서 ngTable 모듈을 가져오는 것이 제대로 작동하는 것 같습니다. 그러나 이것은 현재로서는 해결 방법에 가깝습니다.

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

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

감사합니다 @Boosten , 이것은 저에게

나도이 문제가 있습니다.
'ng-table/src/browser' html 파일과 필터 폴더를 내 webroot '~/ng-table/' 의 ng-table 폴더로 복사했습니다.
webpack을 사용하지 않고 typescript w/o 모듈을 사용합니다. 본질적으로 컴파일된 ES5 앱일 뿐입니다. (가져오기를 사용할 수 없기 때문에 전역이 아니거나 @types 디렉토리 외부에 있을 때 비모듈 프로젝트에 입력을 등록하는 방법을 계속 알아 내려고 노력 중입니다.)

또한 'ng-table/src/browser/date.html' 이(가) 없습니다.
npm에서 ng-table을 설치했으며 버전 3.0.1입니다.

webpack.config.js 파일(Webpack 3.11.0 사용)에서 다음으로 Webpack을 구성하여 수동 단계 없이 템플릿을 로드할 수 있었습니다.

    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/ 웹팩의 구성의 일부가 회전 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가 이를 찾아 올바르게 표시합니다.