Angular2 - 使用 templateUrl 测试组件导致“未处理的承诺拒绝”

Question

我目前正在编写一个简单的测试来测试一个 Angular 2 组件，该组件的模板被一个 templateUrl 引用。我目前正在使用 webpack 来执行所需的任务，包括测试。我正在关注webpack guide on the angular site 以及 AngularClass'angular2-webpack-starter repo。

但是，当测试尝试创建组件夹具时，使用

testBed.createComponent(AppComponent);

我收到以下错误：

"'未处理的 Promise 拒绝：', '加载 app.component.html 失败', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', '未能加载 app.component.html',"

因此显然会导致测试失败。

在我的 app.component.ts 中，我通过 templateUrl 引用模板，就像这样

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent {
    title = "Tour of Heroes";
}

我环顾四周，但没有找到解决此错误的方法。请问有人知道这个问题吗？到目前为止我遇到的所有示例（例如这个 repo https://github.com/rangle/angular2-redux-example 中的示例）都包含内联 html。

如果你想查看 webpack / karma 配置文件，这里是我的 repo 的链接。 https://github.com/jeanpaulattard/tourofheroes

编辑：更新了我的仓库主分支的链接。

Answer 1

经过一番折腾，我回到了关于升级到 webpack 的角度指南，并将问题缩小到在我的 webpack.test.ts 文件中，我使用的是 awesome-typescript-loader，而不是ts-loader 与 angular2-template 加载器链接。

使用字母 2 后（如 Angular 本身提供的指南中所述），测试再次开始工作，模板正在加载属性。

最初我已从 ts-loader + angular2-template-loader 转移到 awesome-typescript-loader，因为它在其他地方被建议作为代码覆盖重新映射的解决方案。

更新：继上周最终发布 (https://angular.io/docs/ts/latest/guide/webpack.html) 之后对 webpack 指南的更新，我注意到该指南已更新为使用“awesome-typescript-loader” .

如果您这样做，请确保按照指南中的建议使用“awesome-typescript-loader”v2.2.4。我尝试按照建议使用“awesome-typescript-loader”，但测试再次开始失败。直到我意识到我使用的是 1.x 版本，它似乎不能很好地工作。