使用 gulp 将 angular 2 项目与延迟加载的模块捆绑在一起

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 创建包的方式

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

您需要将系统 polyfill 添加到您的 index.html 页面

例如

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