2

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

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

testBed.createComponent(AppComponent);

我收到以下错误：

"'未处理的 Promise 拒绝:', '加载 app.component.html 失败', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', 'Failed to加载 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

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

4

1 回答 1

2

After some fiddling around, I went back to the angular guide on upgrading to webpack, and narrowed the issue down to the fact that in my webpack.test.ts file, i was using the awesome-typescript-loader, instead of the ts-loader chained with the angular2-template loader.

After using the letter two (as is described in the guide provided on the angular itself) the tests started to work again, with the template being loaded property.

Originally I had moved from ts-loader + angular2-template-loader to awesome-typescript-loader because it was suggested elsewhere as a solution for code coverage remapping.

Update: Following the update to the webpack guide after the final release last week ( https://angular.io/docs/ts/latest/guide/webpack.html ), I've noticed that the guide was updated to use the "awesome-typescript-loader".

In the case that you do so, make sure to use "awesome-typescript-loader" v2.2.4 as the one suggested in the guide. I tried to use the "awesome-typescript-loader" as suggested, and the tests started to fail again. That was until i realized that i was using the 1.x version, which does not seem to work well.

于 2016-09-15T07:46:09.820 回答