How to include zone.js, reflect-metadata etc. in Systemjs builder task?

Question

I'm using system.js and systemjs builder to create a dist folder with all the packed javascript files of my angular2 application.

It works pretty nicely, except that it does not include the following files, which are currently statically included in the index.html:

• node_modules/zone.js/dist/zone.js
• node_modules/reflect-metadata/Reflect.js
• node_modules/systemjs/dist/system.src.js
• node_modules/esri-system-js/dist/esriSystem.js

How can I force systemjs builder to include these dependencies?

libs-bundle.js:

var SystemBuilder = require('systemjs-builder');
var builder = new SystemBuilder();
builder.loadConfig('./systemjs.config.js').then(function() {
  return builder.bundle(
    'app - [app/**/*]', // build app and remove the app code - this leaves only 3rd party dependencies
    'dist/libs-bundle.js'
  );
}).then(function() {
  console.log('library bundles built successfully!');
});

app-bundle.js

var SystemBuilder = require('systemjs-builder');
var builder = new SystemBuilder();
builder.loadConfig('./systemjs.config.js').then(function() {
  return builder.bundle(
    'app - dist/libs-bundle.js', // build the app only, exclude everything already included in dependencies
    'dist/app-bundle.js'
  );
}).then(function() {
  console.log('Application bundles built successfully!');
});

systemjs.config.js:

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'dist',
      // angular bundles
      '@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',
      // other libraries
      'rxjs': 'npm:rxjs',
      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
      'ng2-slim-loading-bar': 'npm:/ng2-slim-loading-bar',
      'ng2-toasty': 'npm:/ng2-toasty',
      'primeng': 'npm:/primeng',
      '@angular2-material/core': 'npm:/@angular2-material/core',
      '@angular2-material/grid-list': 'npm:/@angular2-material/grid-list'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'esri-mods': {
        defaultExtension: 'js'
      },
      'angular2-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      },
      'ng2-slim-loading-bar': {
        main: 'index.js',
        defaultExtension: 'js'
      },
      'ng2-toasty': {
        main: 'index.js',
        defaultExtension: 'js'
      },
      'primeng': {
        defaultExtension: 'js'
      },
      '@angular2-material/core': {
        main: './core.umd.js',
        defaultExtension: 'js'
      },
      '@angular2-material/grid-list': {
        main: './grid-list.umd.js',
        defaultExtension: 'js'
      }
    },
    meta: {
      'esri/*': {
        build: false
      },
      'esri-mods': {
        build: false
      },
      'dojo/*': {
        build: false
      },
    }
  });
})(this);

Mesentery

do you use the same /systemjs.config.js for both bundles? which bundle do you want zone.js and others to be included into? – Schmid

Yes I use only one systemjs.config.js for both bundles. I'd say everything inside node_modules should go into the libs-bundle.js – Mesentery

have you seen this question? – Schmid

In fact, I've seen this question but I was hoping it can be done without using gulp. – Mesentery

it doesn't seem like systemjs can include files without modules. maybe take a look at webpack from angular-cli – Schmid

Yep I think @Maximus is right.. angular.io/guide/webpack – Bothwell

Answer 1

I would try doing an npm install in your app directory for each of the missing packages

npm i zone.js
npm i reflect-js
npm i systemjs
npm i esri-system-js

Venereal

Answer 2

There are a few thing you should do:

set the saveDependenciesAsComponents in your bit.json file. Look here. When you do bit import, to bring your components, do bit import --skip-npm-install in order to avoid the component package dependencies. This will fallback to the project dependencies due to node module resolution.

Dinadinah

Answer 3

I'm not familiar with the library, but if you're in a node runtime, then would something like this work?

const fs = require('fs');

// File destination.txt will be created or overwritten by default.
fs.copyFile('source.txt', 'destination.txt', (err) => {
  if (err) throw err;
  console.log('source.txt was copied to destination.txt');
});

source

P.S. I recommend fs-jetpack or some other third party wrapper around fs, but this is the simplest snippet to copy a file from one location to another.

Entomology