使用 webpack 构建 angular2 应用程序 - 找不到 ./compiler.es5.ts答案

【问题标题】：Build angular2 app with webpack - can't find ./compiler.es5.ts使用 webpack 构建 angular2 应用程序 - 找不到 ./compiler.es5.ts
【发布时间】：2017-09-07 01:45:40
【问题描述】：

我正在使用 webpack 构建一个 angular2 应用程序。将 angular2 从 2.3.1 升级到 4.0.1 后，webpack 输出以下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

该消息是正确的，因为该位置没有带有ts 扩展名的此类文件，该文件存在但具有js 扩展名。

我错过了 webpack 配置值吗？

顺便说一句：如果我使用 @angular/cli v1.0 构建应用程序，我看不到警告。

【问题讨论】：

好像和source-map-loader有关。作为一种解决方法，我排除了所有 node_modules。

标签： angular build webpack

【解决方案1】：

类似的问题报告在 https://github.com/angular-redux/store/issues/64

解决方法是在 webpack.config.js 中为 source-map-loader 添加 exclude 规则。

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

但是上面的这个解决方法只是暂时的。

【讨论】：

当您使用角度 CLI ng eject 时也会出现问题中描述的错误，这解决了它。谢谢！

【解决方案2】：

当我从一个实际上是符号链接（通过mklink 创建）的文件夹启动应用程序时，我也收到了非常相似的警告。然后 css 也被完全破坏了。

我的问题也可能与 https://github.com/angular/angular-cli/issues/3797 和 https://github.com/angular/angular-cli/issues/2726 有关，当我从常规文件夹启动应用程序时消失了。

【讨论】：

这是我的解决方案，我从C:\Users\ABC\My Documents\Project 开始，而不是C:\Users\ABC\Documents\Project，谢谢！