Angular 2 SystemJS 延迟加载捆绑问题
Angular 2 SystemJS lazyload bundling issue
我正在尝试为延迟加载的模块创建单独的包。以下是代码:
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);
问题已通过讨论解决 here:
根据讨论,我需要使用 bundle 而不是静态 bundle 来进行捆绑过程。所有包都由 SystemJS 加载,因此无需创建静态包。然后我使用了这个片段:
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']
}
});
我正在尝试为延迟加载的模块创建单独的包。以下是代码:
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);
问题已通过讨论解决 here:
根据讨论,我需要使用 bundle 而不是静态 bundle 来进行捆绑过程。所有包都由 SystemJS 加载,因此无需创建静态包。然后我使用了这个片段:
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']
}
});