Angular + Webpack [$ compile：tpload]无法加载模板

Question

如果有人遇到此类问题，请提供帮助。

我使用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

Answer 1

使用template: require('./test.html')代替templateUrl。 在你的指令上：

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

Answer 2

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