使用 Angular 2 Material 时 systemjs-builder buildStatic 失败答案

【问题标题】：systemjs-builder buildStatic fails when using Angular 2 Material使用 Angular 2 Material 时 systemjs-builder buildStatic 失败
【发布时间】：2016-05-28 07:32:20
【问题描述】：

我使用systemjs-builder 和gulp 将所有已编译的JS 文件捆绑为一个。在我尝试使用 Angular Material 2 组件/服务之前，这可以正常工作。在文件顶部有import {MdIcon} from '@angular2-material/icon' 没有问题，但是只要我将MdIcon 或任何其他材料组件或服务添加到directives 或providers 数组，我在构建过程中就会收到错误buildStatic 如：

{ [Error: Error on fetch for node_modules/@angular2-material/icon/icon.js at file:///c:/websites/learn/angular2/node_modules/@angular2-material/icon/icon.js
    Loading app//app/my-app.component.js
    Loading app//main.js
    ENOENT, open 'c:\websites\learn\angular2\node_modules\@angular2-material\icon\usr\local\google\home\jelbourn\material2\tmp\broccoli_type_script_compiler-input_base_path-IydvmmBU.tmp\0\components\icon\icon.js.map']
  originalErr: 
   { [Error: ENOENT, open 'c:\websites\learn\angular2\node_modules\@angular2-material\icon\usr\local\google\home\jelbourn\material2\tmp\broccoli_type_script_compiler-input_base_path-IydvmmBU.tmp\0\components\icon\icon.js.map']
     cause: 
      { [Error: ENOENT, open 'c:\websites\learn\angular2\node_modules\@angular2-material\icon\usr\local\google\home\jelbourn\material2\tmp\broccoli_type_script_compiler-input_base_path-IydvmmBU.tmp\0\components\icon\icon.js.map']
        errno: -4058,
        code: 'ENOENT',
        path: 'c:\\websites\\learn\\angular2\\node_modules\\@angular2-material\\icon\\usr\\local\\google\\home\\jelbourn\\material2\\tmp\\broccoli_type_script_compiler-input_base_path-IydvmmBU.tmp\\0\\components\\icon\\icon.js.map' },
     isOperational: true,
     errno: -4058,
     code: 'ENOENT',
     path: 'c:\\websites\\learn\\angular2\\node_modules\\@angular2-material\\icon\\usr\\local\\google\\home\\jelbourn\\material2\\tmp\\broccoli_type_script_compiler-input_base_path-IydvmmBU.tmp\\0\\components\\icon\\icon.js.map' } }

例程似乎试图从错误的位置加载icon.js.map。它寻找的是c:\websites\learn\angular2\node_modules\@angular2-material\icon\usr\local\google\home\jelbourn\material2\tmp\broccoli_type_script_compiler-input_base_path-IydvmmBU.tmp\0\components\icon\，而不是目录c:\websites\learn\angular2\node_modules\@angular2-material\icon\

我对 Material、Gulp 和 SystemJS-builder 都是新手，所以我不确定从哪里开始寻找问题。正如我所提到的，如果我不包含 Angular 2 材质，一切都会正常工作。

我gulpfile.js的相关部分：

gulp.task('build-ts', function () {
    return gulp.src(appDev + '**/*.ts')
        .pipe(sourcemaps.init())
        .pipe(typescript(tsProject))
        .pipe(sourcemaps.write())
        //.pipe(jsuglify())
        .pipe(gulp.dest(appProd));
});

gulp.task('bundle',['build-ts'], function() {
    var builder = new Builder('', './systemjs.config.js');

    return builder
        .buildStatic(appProd + '/main.js', appProd + '/bundle.js', { minify: true, sourceMaps: true})
        .then(function() {
            console.log('Build complete');
        })
        .catch(function(err) {
            console.log('Build error');
            console.log(err);
        });
});

有什么想法吗？

【问题讨论】：

问题似乎与 github.com/angular/material2/issues/541 中的 Angular 2 材料有关。在@angular2-material\icon\icon.js 的底部有一个错误的sourceMappingURL 引用。如果我修复了引用，则构建过程会走得更远一些，然后在另一个文件中的另一个错误引用上出错。在@angular2-material 文件夹中的许多文件中，坏行都以//# sourceMappingURL= 开头。任何人都知道如何自动剥离它们？我在 Windows 7 中

标签： angular gulp systemjs

【解决方案1】：

这个问题似乎是两件事的结合：

Angular Material 2 alpha 5 在其文件中的源地图链接不正确；当 systemjs-builder 尝试解析这些链接时，它会遇到麻烦。 https://github.com/angular/material2/issues/541
systemjs-builder 中忽略源映射的选项似乎无法有效工作。 https://github.com/systemjs/builder/issues/610

暂时我已降级为systemjs-builder 0.15.16 作为解决方法；该版本不会尝试解决错误链接。

【讨论】：