Angular 2 SystemJS lazyload bundling issue

Question

I am trying to create separate bundle for the modules which are getting loaded lazy. Following is the code:

Gulp code:

var lazyLoadModules = [{
    name: 'eventsModule',
    path: path +'components/events/**/*.js'
}, {
    name: 'crisisModule',
    path: path + 'components/crisis-center/**/*.js'
}];

module.exports = function(systemJsConfig) {
    var defaultSystemJsConfig = config.src + 'systemjs.conf.js';
    systemJsConfig = systemJsConfig || defaultSystemJsConfig;
    gulp.task('build-systemjs', function (done) {
        runSequence('tsc-app', buildSJS);
        function buildSJS () {
            var builder = new Builder();
            builder.loadConfig(systemJsConfig).then(function() {
                builder.buildStatic(
                    path + 'main.js',
                    config.build.path + 'js/appBundle.js',
                    config.systemJs.builder
                );
                lazyLoadModules.map(function(item) {
                    builder.bundle(
                        item.path + ' - ' + path + 'main.js',
                        config.build.path + 'js/' + item.name + '.js',
                        config.systemJs.builder
                    );
                });
            }).then(function() {
                util.log('Build complete');
                done();
            }).catch(function (ex) {
                util.log('Build failed', ex);
                done('Build failed.');
            });
        }
    });
};

SystemJS Code for SystemJSBuilder for bundling:

(function(global) {
// ENV
global.ENV = global.ENV || 'development';

// map tells the System loader where to look for things
var map = {
    'app': 'src/app'
};

// packages tells the System loader how to load when no filename and/or no extension
var packages = {
    'app': {
        defaultExtension: 'js'
    },
    'rxjs': {
        defaultExtension: 'js'
    }
};

// List npm packages here
var npmPackages = [
    '@angular',
    'rxjs',
    'lodash'
];

// Add package entries for packages that expose barrels using index.js
var packageNames = [
    // App barrels
    'app/shared',

    // 3rd party barrels
    'lodash'
];

// Add package entries for angular packages
var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router'
];

npmPackages.forEach(function (pkgName) {
    map[pkgName] = 'node_modules/' + pkgName;
});

packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});

ngPackageNames.forEach(function(pkgName) {
    map['@angular/' + pkgName] = 'node_modules/@angular/' + pkgName +
        '/bundles/' + pkgName + '.umd.js';
});

var config = {
    map: map,
    packages: packages,
    bundles: {
        'build/js/eventsModule.js': ['app/components/events/events.module'],
        'build/js/crisisModule.js': ['app/components/events/crisis-center.module']
    },
};

// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }

System.config(config);

})(this);

Then in index.html, I load the appBundle.js and everything works fine. But when I navigate to events modules which is set of lazy load. It fails I am using systemjs to load modules dynamically on UI end.

SystemJS Code

(function() {
var config = {
    bundles: {
        'build/js/eventsModule.js': ['app/components/events/events.module'],
        'build/js/crisisModule.js': ['app/components/events/crisis-center.module']
    }
};
SystemJS.config(config);
})(this);

Answer 1

Issues was resolved by following the discussion done here:

As per the discussion, I needed to use bundle and not static bundle for bundling process. All bundles are being loaded by SystemJS, so there is no need to create static bundle. Then I used this snippet:

builder.bundle(
    config.app + '**/*.js - [' + config.app + '**/*.js]',
    paths.commonBundle,
    config.systemJs.builder
).then(function() {
    builder.bundle(
        config.app + 'main.js - ' + paths.commonBundle,
        paths.appBundle,
        config.systemJs.builder
    ).then(function() {
        lazyLoadModules.map(function (item) {
            builder.bundle(
                config.app + item.entryPoint + ' - ' + paths.commonBundle + ' - ' + paths.appBundle,
                config.build.path + 'js/' + item.bundleName,
                config.systemJs.builder
            );
        });
    });
});

Then I use SystemJS to load these bundles dynamically.

System.config({
    map: map,
    packages: packages,
    bundles: {
        'build/js/app.bundle.js': ['app/main.js', 'environments/environment', 'app'],
        'build/js/events.bundle.js': ['app/components/events/events.module.js']
    }
});