WebpackのngCache、ES6がテンプレートhtmlを出力しない、構文解析エラー

Question

私は、ES6で書かれたwebpackを使って私のテンプレートを引っ張るために私たちにキャッシュしようとしています。

私は、次のファイルがあります。

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 

と、次の出力を生成しますブラウザで「/ダッシュボード」にアクセスしたとき：

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> 

Answer 1

の内容は、問題は、私は私のwebpack.config.jsファイルで指定されたraw HTMLローダーを持っていたということです。私はrequire()への呼び出しでローダーを指定すると、webpackファイルで指定した設定をオーバーライドすることになりましたが、そうではありません。これを修正すると、解析エラー警告も取り除かれました。