2

I'm currently writing a simple test to test an Angular 2 component whose template is referenced with a templateUrl. I am currently using webpack to perform the tasks required, including testing. I was following the webpack guide on the angular site as well as the AngularClass' angular2-webpack-starter repo.

However, when the test tries to create a component fixture, using

testBed.createComponent(AppComponent);

I am getting the following error:

"'Unhandled Promise rejection:', 'Failed to load app.component.html', '; Zone:', 'ProxyZone', '; Task:', 'Promise.then', '; Value:', 'Failed to load app.component.html',"

thus obviously resulting in a failing test.

In my app.component.ts i'm refering the template via templateUrl like so

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

I Have looked around but haven't found a solution for this error. Anybody aware of this issue please? All the examples which I have encountered so far (for example like the ones in this repo https://github.com/rangle/angular2-redux-example) all include inline html.

Here's a link to my repo in case you would like to see the webpack / karma config files. https://github.com/jeanpaulattard/tourofheroes

Edit: Updated link to the master branch of my repo.

JeanPaul A.
  • 3,613
  • 1
  • 20
  • 29
  • You are using relative paths for the template and styles. Can you try adding the `moduleId: module.id` property to the component decorator? The Angular site has a write up on it [here](https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html) – Dave V Sep 13 '16 at 13:39
  • If you do setup for commonjs and use relative paths as Dave V suggests make sure you are using the `ts` transpiler rather than the default typescript one (which ignores commonjs packaging). Otherwise, you need to define the absolute paths (from the location of index.html) which would be `app/app.component.html` – Steven Luke Sep 13 '16 at 14:54
  • Hi Guys, thanks for your input! As steven said, moduleId: module.id is only necessary when using the SystemJs module loader. In my case, since i'm using webpack as a bundler and loader, I had to use the syntax which i've written above. As for the issue itself, I narrowed it down to the fact that in my webpack.test.ts file, i was using the awesome-typescript-loader, instead of the ts-loader chained angular2-template loader. Will be answering the problem soon. Thanks for you help guys! – JeanPaul A. Sep 15 '16 at 07:40

1 Answers1

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.

JeanPaul A.
  • 3,613
  • 1
  • 20
  • 29