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>

使用gulp捆绑带有延迟加载模块的角度2项目

1 个答案: