angular 1.5 组件模板 webpack require() 导致错误答案

【问题标题】：angular 1.5 component template webpack require() causes errorangular 1.5 组件模板 webpack require() 导致错误
【发布时间】：2016-08-13 08:39:56
【问题描述】：

我正在使用 Angular 1.5.3 和 es6、webpack 和 jam 模板。

除了组件的模板之外，一切都按预期工作。

这行得通

var cmpnt = {
    template: '<div>test</div>'
}

这也有效（当我手动创建 html 文件时）

var cmpnt = {
    template: require('./component.html')
}

这不起作用

var cmpnt = {
    template: require('./component.jade')
}

在浏览器控制台中，我得到

Error: [$injector:unpr] Unknown provider: localsProvider <- locals

.jade 文件存在，我在应用程序的许多其他地方使用require('./template.jade') 没有问题。

有什么想法吗？我可以提供更多信息吗？

【问题讨论】：

component.jade 长什么样子？当您遇到类似的错误时。这意味着您正在尝试将名为 locals 的东西（可能是服务）注入您的控制器/服务/配置/等之一......
目前只是h1 test。我没有在该组件的任何地方注入任何东西。这只是一个存根。
你的应用程序的其余部分怎么样？
@MathewBerg 你是什么意思？其余的不仅仅是一个存根，而且效果很好。只有组件有问题。
在您的整个应用程序中是否有任何地方可以注入本地变量。

标签： angularjs ecmascript-6 pug webpack

【解决方案1】：

jade-loader 返回一个函数。您不能将该函数传递给模板，您必须在传递之前调用该函数

var cmpnt = {
    template: require('./component.jade')();
}

注意require之后的函数调用

【讨论】：

很好地解决了我的问题，但我有点惊讶的是，这是组件中必需的，而不是 UI-Route 的模板属性中所必需的。这个错误让我困惑了至少一个小时
对于组件，函数的调用是必需的，而对于指令，则不需要。