Unable to properly configure systemjs-builder with gulp

Question

I'm trying to generate a static bundle of my angular 2 app (my goal is to have a single minified js file to import with a script tag without systemjs). My app has the following (simplified) structure:

MyProject/
    app/
        monitoring/
            a.ts
            b.ts
        terminals/
            a.ts
            b.ts
        main.ts
        app.module.ts
...

This is my tsconfig:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": false,
    "outDir": "__dist__"
  },
  "filesGlob": [
    "**/*.ts",
    "**/*.tsx",
    "!node_modules/**"
  ]
}

This one the systemjs config:

(function () {

    var DEFAULT_PACKAGE_CONFIG = {
        main: './index.js',
        defaultExtension: 'js'
    };

    System.config({
        paths: {
            'npm:': 'node_modules/'
        },
        map: {
            app: '__dist__',
            monitoring: '__dist__/monitoring',
            terminals: '__dist__/terminals',
            statistics: '__dist__/statistics',
            references: '__dist__/references',

            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

            'rxjs': 'npm:rxjs',
            'primeng': 'npm:primeng',
            'wijmo': 'scripts/vendor',
            'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api'
        },
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            primeng: {
                defaultExtension: 'js'
            },
            wijmo: {
                defaultExtension: 'js'
            },
            monitoring: DEFAULT_PACKAGE_CONFIG,
            terminals: DEFAULT_PACKAGE_CONFIG,
            statistics: DEFAULT_PACKAGE_CONFIG,
            references: DEFAULT_PACKAGE_CONFIG,
            'angular2-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'
            }
        }
    });

})();

...and finally my gulp task:

gulp.task('bundle:js', function () {
    var builder = new SystemJsBuilder('.', './systemjs.config.js');
    return builder
        .buildStatic('__dist__/app/main.js', buildFolder + '/bundle.js');
});

...but when I run it, I get:

> Error on fetch for __dist__/app/monitoring.js at
> file:///MyProject/__dist__/app/monitoring.js  Loading
> __dist__/app/app.module.js    Loading __dist__/app/main.js    ENOENT: no such file or directory, open '/MyProject/__dist__/app/monitoring.js'

...it seems it's ignoring subfolders under "app"... why? How can I fix this error?

Answer 1

It actually looks like the problem is not in ignoring app directory but rather in your configuration.

You have:

System.config({
    packages: {
        monitoring: {
            main: './index.js',
            defaultExtension: 'js'
        }
    ...

So I guess somewhere in your code you import monitoring which is automatically translated to monitoring.js because of the defaultExtension and therefore it throws an error because this file doesn't exist.