I'm new to webpack and right now I'm using it for the first time in one of my angular projects.
I want to use the require function in my html file in order to require the template for an ng-include like so:
<div ng-include="require(./my-template.html)"></div>
I know there are loaders like ng-cache and ngtemplate, but they do not work the way I need it. With them, I have to require the template in an js first and than use the template name in my html file.
How to accomplish this?
You can use webpack-required-loader on npm.
In your app js or module js add comment:
//@require "./**/*.html"
And in your template you can use
<div ng-include="'my-template.html'"></div>
Ngtemplate will works fine. Ng-cache works too.
Also note that there is no need for a relative path in the ng-include
directive because that is taken care of by adding the //@require
command at the head of your entry file.
Lastly, note that you have to use double and single quotes to get ng-include to work. So you'd do "'template-name.html'"
, not "template-name.html"
, or 'template-name.html'
.
How config loaders
Another approach would be to transform my-template.html
into a angular component:
Assuming you use html-loader to load your HTML files (loaders: {test: /\.html/, loader: 'html'}
), define a component myTemplate
in your module JavaScript file:
import myTemplate from './my-template.html';
angular.module(...)
.component('myTemplate', {template: myTemplate})
Afterwards use it:
<my-template></my-template>
You can use HTML loader and angular $templateCache service
angular
.module('template',[])
.run(['$templateCache', function($templateCache) {
var url = 'views/common/navigation.html';
$templateCache.put(url, require(url));
}]);
webpack loader config:
{
test: /\.html$/,
loader: 'html',
query: {
root:sourceRoot
}
}
I've already posted this on https://stackoverflow.com/a/34815472/833093 but:
To enable you must to configure the "relativeTo" parameter, otherwise your template partials get loaded at "/home/username/path/to/project/path/to/template/" (Check your bundle.js you're probably leaking your username in your projects)
var ngTemplateLoader = (
'ngtemplate?relativeTo=' + path.resolve(__dirname, './src/') +
'!html'
);
module.exports = {
...
module: {
loaders: [
{test: /\.html$/, loader: ngTemplateLoader},
],
},
...
}
Then in your code, do a side-effect only require:
// src/webapp/admin/js/foo.js
require('../../templates/path/to/template.html');
Then you can load the html:
<div ng-include src="'/webapp/templates/path/to/template.html'"</div>