javascript - Angular 2 SystemJS 延迟加载捆绑问题

Question

我正在尝试为延迟加载的模块创建单独的包。代码如下:

Gulp 代码:

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.');
            });
        }
    });
};

用于捆绑的 SystemJSBuilder 的 SystemJS 代码:

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

然后在index.html中，我加载appBundle.js，一切正常。但是当我导航到事件模块时，这是一组延迟加载的。它失败我正在使用 systemjs 在 UI 端动态加载模块。

SystemJS 代码

(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

通过讨论 here 解决了问题:

根据讨论，我需要使用 bundle 而不是静态 bundle 来进行捆绑过程。所有 bundle 都由 SystemJS 加载，因此无需创建静态 bundle 。然后我使用了这个片段:

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

然后我使用 SystemJS 动态加载这些包。

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']
    }
});