WearyMonkey / ngtemplate-loader

Include AngularJS templates in the Webpack bundle and preload the template cache.
MIT License
238 stars 78 forks source link

Use a variable for HTML rather than inline it #13

Closed axtgr closed 9 years ago

axtgr commented 9 years ago

I'm trying to use ng-inline (which is just a static version of ng-include) with this module and html-loader to make my partials load and cache automatically when I use the ng-inline directive. An example:

<div ng-inline="path/to/module"></div>

It works for simple cases, but for nested inlined templates it fails. html-loader replaces the path with a call to __webpack_require__ and then ngtemplate-loader inlines the HTML in a run block. Nested templates produce nested run blocks which simply don't work. Consider this generated code:

/***/ },
/* 14 */
/***/ function(module, exports, __webpack_require__) {

  var path = '/pages/template.html';
  window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, "foo <div ng-inline=\"" + __webpack_require__(15) + "\"></div>") }]);
  module.exports = path;

/***/ },
/* 15 */
/***/ function(module, exports, __webpack_require__) {

  var path = '/pages/template.html';
  window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, "bar <div ng-inline=\"" + __webpack_require__(16) + "\"></div>") }]);
  module.exports = path;

/***/ },

The 15th c.put is never called since, as I said, its run block is called from another run block. A simple solution to this is to create a variable for the HTML instead of inlining it, so the code will look like this:

function(module, exports, __webpack_require__) {

  var path = '/pages/template.html';
  var html = "bar <div ng-inline=\"" + __webpack_require__(16) + "\"></div>";
  window.angular.module('ng').run(['$templateCache', function(c) { c.put(path, html) }]);
  module.exports = path;

}

The __webpack_require__ is now called before the run block.

WearyMonkey commented 9 years ago

Thanks Alex, nice fix. Will do a release later.