我正在尝试使用 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>
最佳答案
问题是我在 webpack.config.js 文件中指定了 raw
html 加载器。我认为在调用 require()
时指定加载器会覆盖我在 webpack 文件中指定的任何设置,但事实并非如此。修复此问题还删除了解析错误警告。
关于javascript - ngCache与Webpack,ES6不输出模板html,解析错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41489322/