Webpack ngTemplate-loader 不会将我的模板包含到包中：如何调试？

Question

我使用 webpack 构建了一个 angular 项目。我的 webpack 配置是从另一个项目复制过来的，成功运行。

但在我的项目中，它不会将 .html 模板包含到生成的 javascript 包中。

下面是感兴趣的 webpack 配置部分：

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"]
            }
        ]
    }
}

我的项目脚手架如下：

├── 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

在index.html我说：

<div id="header" ng-include="'/components/header/header.html'"></div>

和 header 模板未包含在生成的 app.<hash>.js 包中。如何调试？

Answer 1

Html-loader 默认不解析 ng-include 属性。所以，你需要将 attrs parameter 传递给 loader:

html?attrs[]=div:ng-include