Angular + Webpack [$compile:tpload] 无法加载模板答案

【问题标题】：Angular + Webpack [$compile:tpload] Failed to load templateAngular + Webpack [$compile:tpload] 无法加载模板
【发布时间】：2016-01-06 09:32:26
【问题描述】：

如果有人遇到这样的问题，请帮忙。

我使用Angular + Webpack 并尝试使用html-loader 向我的JS 请求HTML 文件。

起初我需要html 文件到我的directive

var templateUrl = require('./test.html');

然后我执行webpack 命令，webpack 说一切都很好，并且捆绑所有文件没有任何问题。

然后我有一个错误（它在我的控制台中）：

[$compile:tpload] Failed to load template: <div class="test">
<p>This is my TEST</p>
</div> (HTTP status: 404 Not Found)

据我了解，它看到了我的 html，但在此之前它说无法获取它（模板），这是为什么呢？

网络中的请求

GET http://127.0.0.1:7773/portal/%3Cdiv%20class=%22test%22.....

例如成功需要：

Request URL:http://127.0.0.1:7773/portal/dev/bundle.js

据我了解，webpack 在其他地方寻找它。如何解决？

有关我的完整路径的信息：

/home/darthjs/Documents/****/src/public/portal/app/components/navtop/test.html

【问题讨论】：

标签： angularjs webpack

【解决方案1】：

使用template: require('./test.html') 代替templateUrl。根据您的指示：

{ // directive definition object
  restrict: 'A',
  template: require('./file.html')
}

【讨论】：

我的上帝！严重地！非常感谢！
应该是template: require('./file.html').default。不得不在谷歌上进行大量搜索才能使其正常工作。

【解决方案2】：

您正在读取文件内容并将其用作 URL。你应该使用ngtemplate-loader（或任何其他类似的加载器）来获得你想要的——它会将文件内容放入 Angular 的模板缓存中。

【讨论】：

感谢推荐，不知道为什么，没有html模板我不能安装。我刚刚尝试过 template-html-loader 和 ngtemplate-loader。