angular2-template-loader fails to inline component template

Question

I was following the intruduction tutorial on Webpack for Angular 2: https://angular.io/docs/ts/latest/guide/webpack.html

After finishing all the steps I am getting a 404 error when trying to load the template of the app component.

The tutorial clearly states that the app.component.html and app.component.css should be bundeled on the fly by angular2-template-loader, but they are not, since the browser is trying to request them via XHR.

Code of app.compnent.ts from the tutorial:

import { Component } from '@angular/core';
import '../../public/css/styles.css';
@Component({
    selector: 'my-app',
    templateUrl: 'app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent { }

It works if I specify the template path relative to the base path, but that is not the right approach.

import { Component } from '@angular/core';
import '../../public/css/styles.css';
@Component({
    selector: 'my-app',
    templateUrl: './src/app/app.component.html',
    styleUrls: ['./src/app/app.component.css']
})
export class AppComponent { }

Does anyone have an idea why this is happening, and is anyone able to complete the tutorial with a working solution?

Answer 1

Make sure that webpack does the typescript compiling process. I had the same issue, and the problem was that Visual Studio was compiling my ts files on save, and since WebPack is configured to resolve .js files and .ts files, the loaders were trying to get applied on the already compiled js files instead of the source ts files.

So to summarize:

1. Make sure that you don't have your ts files already compiled in your directory.
2. Install typescript in your project's local node_modules.
3. Configure webpack as following the angular tutorial.
4. Run webpack from the command line in the directory where the webpack.config.js file exists. This ensures that webpack IS THE ONE doing the typescript compiling and thus the ts files enter the pipeline.

It should work for you now.