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

admin管理员组

文章数量:1192355

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);

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);

• javascript
• angular
• systemjs
• systemjs-builder

Share Improve this question Follow edited Sep 12, 2018 at 11:17 n1stre 6,08644 gold badges2323 silver badges4242 bronze badges asked Nov 10, 2016 at 13:10 user66875user66875 2,60844 gold badges3333 silver badges5757 bronze badges 6

• do you use the same /systemjs.config.js for both bundles? which bundle do you want zone.js and others to be included into? – Max Koretskyi Commented Nov 14, 2016 at 9:26
• 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 – user66875 Commented Nov 14, 2016 at 9:53
• have you seen this question? – Max Koretskyi Commented Nov 14, 2016 at 11:04
• In fact, I've seen this question but I was hoping it can be done without using gulp. – user66875 Commented Nov 15, 2016 at 22:01
• 4 it doesn't seem like systemjs can include files without modules. maybe take a look at webpack from angular-cli – Max Koretskyi Commented Nov 16, 2016 at 11:05

 |  Show 1 more comment

3 Answers 3

Sorted by: Reset to default 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

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.

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.

本文标签： javascriptHow to include zonejsreflectmetadata etc in Systemjs builder taskStack Overflow