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

Question

我用webpack来构建一个有角度的项目。我的 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>

和标头模板不包含在生成的app.<hash>.js捆绑包中。如何调试？

Answer 1

默认情况下

Html-loader不解析ng-include属性。因此，您需要attrs参数传递给加载器：

html?attrs[]=div:ng-include