CODEWITHSUNDEEP
javascriptangularsystemjssystemjs-builder
user66875
user66875

Reputation: 2618

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

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:

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

Upvotes: 66

Views: 1980

Answers (3)

Kraken
Kraken

Reputation: 5900

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.

Upvotes: 0

Kanhaiya jee
Kanhaiya jee

Reputation: 1

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.

Upvotes: 0

Hari Bheesetti
Hari Bheesetti

Reputation: 11

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

Upvotes: 1

Related Questions