Question

我使用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\，它正在寻找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\

我是Material，Gulp和SystemJS-builder的新手，所以我不知道从哪里开始寻找问题。正如我所提到的，如果我不包括Angular 2 Material，那么事情就可以了。

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);
        });
});

有什么想法吗？

Answer 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作为解决方法;该版本不会尝试解决不良链接。

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

1 个答案: