Angular 2 SystemJS懶惰加載捆綁問題

Question

我正在嘗試爲懶得加載的模塊創建單獨的捆綁包。以下是代碼：

咕嘟咕嘟代碼：

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

Answer 1

問題被做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'] 
    } 
});