Build angular2 app with webpack - can't find ./compiler.es5.ts

Question

I'm using webpack to build an angular2 app. after upgrading angular2 from 2.3.1 to 4.0.1, webpack is outputting the following Warning:

WARNING in ./~/@angular/compiler/@angular/compiler.es5.js
Cannot find source file 'compiler.es5.ts': Error: Can't resolve 
'./compiler.es5.ts' in '../node_modules\@angular\compiler\@angular'
@ ./~/@angular/platform-browser-dynamic/@angular/platform-browser-dynamic.es5.js 11:0-72

The message is correct because there is not such a file with ts extension at that location, the file exist but has js extension.

Do I mis a webpack configuration value?

BTW: I do not see the warning, if I use @angular/cli v1.0 to build the app.

Answer 1

Similar issue is reported in https://github.com/angular-redux/store/issues/64

Workaround is adding exclude rule for source-map-loader in your webpack.config.js.

{
        test: /\.(js|ts)$/,
        exclude: [
            // workaround for this issue
            path.join(__dirname, 'node_modules', '@angular/compiler')
        ],
        use: [{
            loader: 'source-map-loader'
        }],
        enforce: 'pre'
}

But this workaround above is no more than temporary one.

Answer 2

I also got very similar warning when I was starting the application from a folder that was actually a symlink (created via mklink). Also the css was then completely broken.

My issue was also related probably to https://github.com/angular/angular-cli/issues/3797 and https://github.com/angular/angular-cli/issues/2726 and disappeared when I started the app from a regular folder.