Question

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

但是，当测试尝试使用

创建组件夹具时

testBed.createComponent(AppComponent);

我收到以下错误：

＆＃34;＆＃39;未处理承诺拒绝：＆＃39;，＆＃39;无法加载app.component.html＆＃39;，＆＃39 ;;区域：＆＃39;，＆＃39; ProxyZone＆＃39;，＆＃39 ;;任务：＆＃39;，＆＃39; Promise.then＆＃39;，＆＃39 ;;价值：＆＃39;，＆＃39;无法加载app.component.html＆＃39;，＆＃34;

因此显然导致测试失败。

在我的app.component.ts中，我通过templateUrl引用模板，如此

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

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

如果您想查看webpack / karma配置文件，请访问我的回购链接。 https://github.com/jeanpaulattard/tourofheroes

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

Answer 1

经过一番摆弄后，我回到了有关升级到webpack的角度指南，并将问题缩小到我的webpack.test.ts文件中，我正在使用awesome-typescript-loader而不是ts-loader与angular2-template loader链接在一起。

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

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

更新：在上周最终发布（https://angular.io/docs/ts/latest/guide/webpack.html）后对网络包指南进行更新后，我注意到该指南已更新为使用＆＃34 ;真棒-打字稿装载机＆＃34;

如果您这样做，请务必使用＆＃34; awesome-typescript-loader＆＃34; v2.2.4，如指南中建议的那样。我尝试使用＆＃34; awesome-typescript-loader＆＃34;如建议的那样，测试又开始失败了。直到我意识到我使用的是1.x版本，这似乎并不好用。

Angular2 - 使用templateUrl测试组件导致＆＃34;未处理的承诺拒绝＆＃34;

1 个答案: