I use webpack to build an angular project. My webpack configuration is copied from another project, where it works successfully.
But in my project it won't include .html templates into the resulting javascript bundle.
Here's the part of webpack configuration of interest:
const webpackConfig = {
...
module: {
...
plugins: [
new HtmlWebpackPlugin({
inject: "body",
template: "app/index.html",
filename: "index.html"
})
],
loaders: [
...
{
test: /\.html$/,
exclude: `${path.join(__dirname, "/app/index.html")}`,
loaders: [`ngtemplate?relativeTo=${path.join(__dirname, "/app")}`, "html"]
}
]
}
}
The scaffold of my project is as follows:
├── app
│ ├── app.js
│ ├── components
│ │ ├── auth
│ │ │ ├── auth.module.js
│ │ │ ├── auth.service.js
│ │ │ └── user.service.js
│ │ ├── footer
│ │ │ └── footer.html
│ │ ├── header
│ │ │ └── header.html
│ │ ├── home
│ │ │ ├── home.html
│ │ │ └── home.module.js
│ │ ├── navigation
│ │ │ └── navigation.html
│ │ ├── right_sidebar
│ │ │ └── right_sidebar.html
│ │ └── util
│ │ ├── util.module.js
│ │ └── util.service.js
│ ├── index.html
│ └── shared
├── assets
├── package.json
├── gulpfile.js
└── webpack.config.js
In index.html
I say:
<div id="header" ng-include="'/components/header/header.html'"></div>
and header template is not included in the resulting app.<hash>.js
bundle. How to debug this?
Html-loader
not parsed ng-include
attribute by default. So, you need to pass attrs
parameter to loader:
html?attrs[]=div:ng-include