Webpack ngTemplate-loader won't include my templates into the bundle: how to debug?

Question

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?

Answer 1

Html-loader not parsed ng-include attribute by default. So, you need to pass attrs parameter to loader:

html?attrs[]=div:ng-include