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?

score 0 · Answer 1 · answered Oct 12 '16 at 07:31

0

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.

answered Oct 12 '16 at 07:31

martin

93,354
25
191
226

The settings for "monitoring" package are required for systemjs during development (and it works fine), otherwise it tries to load monitoring.js as I'm facing during the gulp compilation... in the source code imports are like this one: `import {DashboardComponent, AvailabilityComponent, AlertsComponent} from "./monitoring";` ...so I really don't understand what is wrong and how to fix :( – daveoncode Oct 12 '16 at 08:17
You don't have to use the same SystemJS config for both development and production. If you're sure you can handle loading the dependency in the browser and you're just unable to compile it you can use `build: false` option on particular resources. See https://github.com/systemjs/builder#ignore-resources – martin Oct 12 '16 at 08:29
actually, it seems that the problem is the multiple import... if I define a single import for each component in the package it compiles without errors – daveoncode Oct 12 '16 at 08:34
@daveoncode Then maybe in `map` you could use `monitoring*` to match everything in this package. – martin Oct 12 '16 at 15:47

Unable to properly configure systemjs-builder with gulp

1 Answers1