Misconfiguration in "Advanced - Webpack: an introduction" example

[JeremyTCD]

Issue
The following 404 may occur when running the example:
zone.js:1274 GET http://localhost:8080/app.component.html 404 (Not Found)

Reproducing the issue

1. Create a project from the source files listed here: https://angular.io/docs/ts/latest/guide/webpack.html
2. Run Typescript compiler manually: tsc
3. Run webpack-dev-server: npm start

Cause
Within webpack.common.js, the following resolve configuration is used:

resolve: {  
    extensions: ['', '.js', '.ts']  
}

This configuration causes webpack to utilize js files over ts files to satisfy imports. This in turn means that angular2-template-loader and html-loader never get the chance to replace templateUrl values.

loaders: [  
    // these loaders never touch component ts files if js equivalents exist in the same folder
    {  
        test: /\.ts$/,  
        loaders: ['awesome-typescript-loader', 'angular2-template-loader']  
    },
    {  
         test: /\.html$/,          
         loader: 'html'  
    }...  
]

Solution
Webpack should prioritize ts files:

resolve: {  
    // ts before js
    extensions: ['', '.ts', '.js']  
}

[Foxandxss]

I swear this was reported already, we had an ongoing discussion and ended there. I will investigate.

[Foxandxss]

I changed the order in a PR, but I see where your problem lies.

You don't have to run tsc by hand. That will generate a bunch of .js files and webpack makes no use of them. With the actual resolve configuration, webpack will try to use those .js and yes, fail.

Is there any reason you do tsc?

[JeremyTCD]

I was utilizing the webpack.config in my own project in Visual Studio. By default, the typescript plugin for VS runs tsc automatically.

Anyway, there is no harm in changing the order. Angular-cli's webpack-build-common.ts uses

resolve: {  
    extensions: ['.ts', '.js']  
}

This issue #2445 is almost certainly the same problem. Thanks for fixing.