Невозможно правильно настроить systemjs-builder с gulp

Question

Я пытаюсь сгенерировать статический пакет моего приложения angular 2 (моя цель - создать единственный минимизированный js-файл для импорта с тегом script без systemjs). Мое приложение имеет следующую (упрощенную) структуру:

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

Это мой 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/**"
  ]
}

Это конфиг systemjs:

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

})();

... и, наконец, мое задание:

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

... но когда я запускаю его, я получаю:

> 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'

... кажется, что он игнорирует подпапки в "приложении"... почему? Как я могу исправить эту ошибку?

Answer 1

На самом деле похоже, что проблема не в игнорировании app каталог, а точнее в вашей конфигурации.

У тебя есть:

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

Я думаю, что где-то в вашем коде вы импортируете monitoring который автоматически переводится на monitoring.js из-за defaultExtension и поэтому он выдает ошибку, потому что этот файл не существует.