Bundle angular 2項目與延遲加載模塊使用gulp

Question

我有一個應用程序，它爲延遲加載組件提供服務，它在開發環境中工作正常，但它在爲下面提到的產品進行捆綁後出現錯誤。

ErrorHandler : Error: Uncaught (in promise): TypeError: System.import is not a function 
TypeError: System.import is not a function 
    at a.loadAndCompile (1499149250078.main.bundle.js?version=4562730455:formatted:37406) 
    at a.load (1499149250078.main.bundle.js?version=4562730455:formatted:37397) 
    at a.loadModuleFactory (1499149250078.main.bundle.js?version=4562730455:formatted:42937) 
    at a.load (1499149250078.main.bundle.js?version=4562730455:formatted:42926) 
    at b.project (1499149250078.main.bundle.js?version=4562730455:formatted:43327) 
    at b._tryNext (1499149250078.main.bundle.js?version=4562730455:formatted:50090) 
    at b._next (1499149250078.main.bundle.js?version=4562730455:formatted:50084) 
    at b.next (1499149250078.main.bundle.js?version=4562730455:formatted:55977) 
    at b._subscribe (1499149250078.main.bundle.js?version=4562730455:formatted:54037) 
    at b.a.subscribe (1499149250078.main.bundle.js?version=4562730455:formatted:55865) 

這是我如何使用一飲而盡

gulp.task('bundle:app', function() { 
    var builder = new Builder('./','./systemjs.config.js'); 
    builder.buildStatic('app/main.js', './dist/' + jsMainBundleName, {minify:true})   
     .catch(function (err) { 
      console.log('App bundle error'); 
      console.log(err); 
     }); 
}); 

這裏是我的system.config.js

(function (global) { 

    var angular2ModalVer = '@2.0.0-beta.11'; 
    //var plugin = 'bootstrap'; // js-native/vex 
    global.angular2ModalVer = angular2ModalVer; 

    System.config({ 
    paths: { 
     // paths serve as alias 
     'npm:': 'node_modules/' 
    }, 
    // map tells the System loader where to look for things 
    map: { 
     // our app is within the app folder 
     app: 'app', 

     // angular bundles 
     '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
     '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
     '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
     '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
     '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
     '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
     '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
     '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
     '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js', 

     // other libraries 
     'rxjs': 'npm:rxjs', 
     '@angular2-material/core': 'npm:@angular2-material/core/core.umd.js', 
     '@angular2-material/toolbar': 'npm:@angular2-material/toolbar/toolbar.umd.js', 
     '@angular2-material/sidenav': 'npm:@angular2-material/sidenav/sidenav.umd.js', 
     'ng2-cookies': 'node_modules/ng2-cookies', 
     'angular2-modal': 'node_modules/angular2-modal', 
     'angular2-modal/plugins/bootstrap': 'node_modules/angular2-modal/bundles/angular2-modal.bootstrap.umd.js', 

     //shims 
     'core-js-shim': 'npm:core-js/client/shim.min.js', 
     'zone': 'npm:zone.js/dist/zone.js', 
     'reflect': 'npm:reflect-metadata/Reflect.js', 
     'css': 'node_modules/systemjs-plugin-css/css.js', 
     'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 
     //'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, 
    }, 

    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
     app: { 
     main: './main.js', 
     defaultExtension: 'js' 
     }, 
     rxjs: { 
     defaultExtension: 'js' 
     }, 
     'ng2-cookies': { 
     defaultExtension: 'js' 
     }, 
     'angular2-modal': { 
     defaultExtension: 'js', main: 'bundles/angular2-modal.umd' 
     }, 
     'angular2-modal/plugins/bootstrap}': { 
     defaultExtension: 'js', main: 'angular2-modal.bootstrap.umd' 
     }, 
     'angular2-in-memory-web-api': { 
     defaultExtension: 'js', main: 'index.js' 
     }, 
    } 
    }); 
})(this); 

創建一個包，這是我如何路由模塊。

{ path: 'profile', loadChildren:'./app/ui/dashboard/profile.module#ProfileRouteModule' } 

謝謝！

Answer 1

您需要將系統填充工具添加到您的index.html頁面

e.g

<script src="node_modules/systemjs/dist/system.src.js"></script>