CODEWITHSUNDEEP
angulargulpsystemjs
BeetleJuice
BeetleJuice

Reputation: 40916

systemjs-builder buildStatic fails when using Angular 2 Material

I use systemjs-builder along with gulp to bundle all compiled JS files into one. This works fine until I attempt to use Angular Material 2 components/services. Having the import {MdIcon} from '@angular2-material/icon' at the top of the file is no problem, but as soon as I add MdIcon or any other Material component or service to the directives or providers arrays, I get an error during the build process buildStatic such as:

{ [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' } }

It seems the routine is trying to load icon.js.map from the wrong location. Instead of the directory c:\websites\learn\angular2\node_modules\@angular2-material\icon\, it's looking for 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\

I am new to both Material, Gulp and SystemJS-builder so I'm not sure where to start looking for the problem. As I mentioned, things work fine if I don't include Angular 2 Material.

The relevant portions of my 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);
        });
});

Any ideas?

Upvotes: 0

Views: 776

Answers (1)

BeetleJuice
BeetleJuice

Reputation: 40916

The issue seems to be a combination of 2 things:

  1. Angular Material 2 alpha 5 has incorrect source map links in its files; As systemjs-builder tries to resolve those links it runs into trouble. https://github.com/angular/material2/issues/541

  2. The option in systemjs-builder to ignore source maps doesn't seem to work effectively. https://github.com/systemjs/builder/issues/610

For the time being I have downgraded to systemjs-builder 0.15.16 as a workaround; that version does not try to resolve the bad links.

Upvotes: 0

Related Questions