1
我正在尝试为懒得加载的模块创建单独的捆绑包。以下是代码:Angular 2 SystemJS懒惰加载捆绑问题
咕嘟咕嘟代码:
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代码SystemJSBuilder捆绑:
(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);