2017-03-08 83 views
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); 

回答

0

问题被做here讨论以下解决:

按照讨论中,我需要使用捆绑,而不是静态束捆扎过程。所有的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'] 
    } 
});