Bundle angulaire 2 projet avec module par chargement par chargement par goulotte

Question

J'ai une application qui sert des composants avec chargement paresseux et cela fonctionne bien sur l'environnement de développement, mais il donne une erreur après l'avoir regroupé pour la production mentionnée ci-dessous.

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) 

Voilà comment je suis en train de créer un paquet en utilisant gulp

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

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

et voici comment je suis le routage des modules.

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

Merci!

Answer 1

Vous devez ajouter le système polyfill à votre page index.html

par exemple

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