Angular2 SystemJs Bundles and Non Bundled js

Question

I'm new to SystemJs and Angular2. I am using 3rd party packages, some of which have bundles/code.js files and some do not.

The ones that are using bundles/code.js I have managed to get working.

I include <script src=foo/bundles/code.js> and am then able to import * from 'code/foo' inside my ts files.

This all makes sense to me as the bundles/code.js has something like System.registerDynamic("code/foo",...) and so the import knows what code/foo is (This is my understanding of it)

I have come across a package that does not use bundles. The .js file I need to load looks like this:

// ./vendor/ng2-file-upload/ng2-file-upload.js

function __export(m) {
    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
__export(require('./components/file-upload/file-select'));
__export(require('./components/file-upload/file-drop'));
__export(require('./components/file-upload/file-uploader'));
var file_select_2 = require('./components/file-upload/file-select');
var file_drop_2 = require('./components/file-upload/file-drop');
exports.FILE_UPLOAD_DIRECTIVES = [file_select_2.FileSelect, file_drop_2.FileDrop];
//# sourceMappingURL=ng2-file-upload.js.map

I realize this is not in System format. I have tried the following in my index.html:

System.config({
    packages: {
        'js': {
            format: 'register',
            defaultExtension: 'js'
        }
    },
    meta: {
       'vendor/ng2-file-upload/ng2-file-upload.js' : {
            format: 'cjs', // I have also tried 'amd' and 'global'
            defaultExtension: 'js'
       }
    }
});

I have also tried

System.config({
    packages: {
        'js': {
            format: 'register',
            defaultExtension: 'js'
        },
       'vendor/ng2-file-upload/ng2-file-upload.js' : {
            format: 'cjs', // I have also tried 'amd' and 'global'
            defaultExtension: 'js'
       }
    }
});

No matter what I do I end up with the following error:

Uncaught ReferenceError: require is not defined

I have 2 questions:

How do I load ng2-file-upload.js?
How would I go about creating a bundle for this package? (The package contains all .ts and .d.ts files when running npm install)

score 1 · Accepted Answer · answered Feb 28 '16 at 01:48

This all makes sense to me as the bundles/code.js has something like System.registerDynamic("code/foo",...) and so the import knows what code/foo is (This is my understanding of it)

You are correct, when you compile your code as system modules, it is safe to load them with script tag, assuming SystemJS is loaded. You can test this with:

  <script async src="~/system.src.js"></script>

Loading system.js asynchronously will give:

Uncaught ReferenceError: System is not defined

Same is with commonjs modules, so if you don't use RequireJS loader, don't load them via script tag. Instead you should use SystemJS to load commonjs modules:

  System.import("vendor/ng2-file-upload/ng2-file-upload.js")
    .then(function() {
       System.import("/static/scripts/bootstrap.js");
    }, console.error.bind(console));

ng2-file-upload.js should already be a bundle, hence you're loading it this way. If it's not, just add it's .ts files to your source files and use them the same way you are using your code.

Angular2 SystemJs Bundles and Non Bundled js

I have 2 questions:

1 Answers1

Linked