Angular2 - 使用 templateUrl 测试组件，导致"Unhandled Promise rejection"

Question

我目前正在编写一个简单的测试来测试一个模板被templateUrl引用的Angular 2组件。我目前正在使用webpack来执行所需的任务，包括测试。我一直在遵循angular网站上的webpack指南以及AngularClass的angular2-webpack-starter repo。

然而，当测试试图创建一个组件夹具时，使用

testBed.createComponent(AppComponent);

我得到以下错误:

"'未处理的承诺拒绝:'，'加载app.component.html失败'，';Zone:'， 'ProxyZone'， ';任务:','的承诺。然后',';值:'，'加载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

编辑:更新链接到我的repo的主分支

Answer 1

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

在使用了字母2之后(正如angular本身提供的指南中所描述的那样)，测试又开始工作了，带有模板被加载属性。

最初我从ts-loader + angular2-template-loader转到了awesome-typescript-loader，因为有人建议它作为代码覆盖重新映射的解决方案。

Update:在上周最终版本(https://angular.io/docs/ts/latest/guide/webpack.html)之后，我注意到该指南被更新为使用"awesome-typescript-loader"。

如果这样做，请确保使用指南中建议的"awesome-typescript-loader"v2.2.4版本。我试着按照建议使用"awesome-typescript-loader"，测试又开始失败了。直到我意识到我用的是1。X版本，它似乎不太好用。