ngCache 与 Webpack，ES6 不输出模板 html，解析错误答案

【问题标题】：ngCache with Webpack, ES6 not outputting template html, parse errorngCache 与 Webpack，ES6 不输出模板 html，解析错误
【发布时间】：2017-05-20 05:59:10
【问题描述】：

我正在尝试使用 ng-cache，以便在一个用 ES6 编写并使用 webpack 的 Angular 项目中提取我的模板。

我有以下文件：

dashboard.config.js：

require('ng-cache!./index.html');
require('ng-cache!./nav-sidebar.html');

export default function DashboardConfig($stateProvider) {
  'ngInject';

  // Define the routes
  $stateProvider
    .state('dashboard', {
      url: '/dashboard',
      controller: 'DashboardController as $ctrl',
      templateUrl: 'index.html'
    });

}

这会在运行 webpack 时产生如下错误：

Error: Parse Error: <div class=\"clearfix\"></div>\r\n\r\n<div flex layout=\"row\" class=\"dashboard\">\r\n\r\n    Dashboard!\r\n    <ng-include src=\"'nav-sidebar.html'\"></ng-include>\r\n\r\n    <!-- Container #3 -->\r\n\r\n\r\n    <!-- Container #4 -->\r\n    <md-content id=\"dashboard-content\" ui-view=\"\" class=\"md-padding\" layout=\"column\"></md-content>\r\n    \r\n    <!--<md-content flex id=\"content\"></md-content>-->\r\n\r\n</div>"
Using unminified HTML

并在访问“/dashboard”时在浏览器中产生如下输出：

module.exports = "
\r\n\r\n
\r\n\r\n Dashboard!\r\n \r\n\r\n \r\n\r\n\r\n \r\n
\r\n \r\n \r\n\r\n
"

现在这里发生了一些奇怪的事情。为什么它试图解析 HTML？摆脱指令可以摆脱解析错误，但我仍然遇到输出看到 module.export="..." 而不是看到模板的问题。

这是index.html

的内容

<div class="clearfix"></div>

<div flex layout="row" class="dashboard">

    Dashboard!
    <ng-include src="'nav-sidebar.html'"></ng-include>

    <md-content id="dashboard-content" ui-view="" class="md-padding" layout="column"></md-content>

</div>

【问题讨论】：

标签： javascript angularjs webpack ecmascript-6 angularjs-ng-include

【解决方案1】：

问题是我在 webpack.config.js 文件中指定了 raw html 加载器。我认为在调用 require() 时指定加载程序会覆盖我在 webpack 文件中指定的任何设置，但事实并非如此。修复此问题也消除了解析错误警告。

【讨论】：

您能否详细解释一下您所做的更改？