I've tried to get custom data injected into our .html template using this loader without any success. We've been able to successfully build our assets and have them injected, however, the ability to pass in dynamic data has not worked. Looking at the examples provided in this repo, I don't see how options.title is passed into the template.
I'm using this starter kit, which is quite simple with this plugin: https://github.com/AngularClass/NG6-starter
Here are the versions of the relevant dependencies:
"webpack": "^2.2.1"
"html-webpack-plugin": "^2.29.0"
Copy the relevant section from webpack.config.js:
module.exports = {
devtool: 'source-map',
entry: {
app: [
'babel-polyfill',
path.join(__dirname, 'client', 'app/app.js')
]
},
module: {
loaders: [
{ test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'ng-annotate-loader!babel-loader' },
{ test: /\.html$/, loader: 'raw-loader' }, // have also tried with the html-loader
{ test: /\.(scss|sass)$/, loader: 'style-loader!css-loader!sass-loader' },
{ test: /\.css$/, loader: 'style-loader!css-loader' }
]
},
plugins: [
// Injects bundles in your index.html instead of wiring all manually.
// It also adds hash to all injected assets so we don't have problems
// with cache purging during deployment.
new HtmlWebpackPlugin({
template: 'client/index.html',
// inject: 'body',
// hash: true,
title: 'TEST!!!!!!!!!!!',
options: {
title: "TEST!!!!!!!!!!!!!*"
},
chunks: ['vendor', 'app']
}),
// Automatically move all modules defined outside of application directory to vendor bundle.
// If you are using more complicated project structure, consider to specify common chunks manually.
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
minChunks: module => /node_modules/.test(module.resource)
})
]
};
Template file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="description" content="NG6-Starter by @AngularClass">
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<base href="/">
</head>
<body ng-app="app" ng-strict-di ng-cloak>
<%= htmlWebpackPlugin.options.title %>
<%= htmlWebpackPlugin.title %>
<%= title %>
<%= '\<\%\= htmlWebpackPlugin.title \%\>' %>
<%= '\<\%\= htmlWebpackPlugin.options \%\>' %>
</body>
</html>