Angular 2 SystemJS-builder和lazy(async)路由

时间:2016-09-03 10:27:54

标签: angular angular2-routing systemjs

Angular 2 rc 6typescript

编码

我一直在使用SystemJS-builder将我的脚本捆绑到一个bundle.js中,从而极大地减少了我的http请求。我使用buildStatic()方法。

我刚刚注意到,当我使用延迟加载的路由时,尝试导航到这样的路由会引发此错误:

  

EXCEPTION:Uncaught(在promise中):TypeError:this._system(...)。import   不是一个功能

可以使用SystemJS构建器捆绑使用延迟加载路由的Angular 2项目吗?

gulpfile.js

var typescript = require('gulp-typescript');
var tsProject = typescript.createProject('tsconfig.json');
var Builder = require('systemjs-builder');

//typescript compilation
gulp.task('build-ts', function () {
    return gulp.src(appDev + '**/*.ts')
        .pipe(typescript(tsProject))
        .pipe(gulp.dest(appProd));
});

//transpile typescript into JS first ('build-ts'), then bundle JS files
gulp.task('bundle',['build-ts'], function() {
    var builder = new Builder('', './systemjs.config.js');

    return builder
        .buildStatic(appProd + '/main.js', appProd + '/bundle.js', {encodeNames:false})
        .then(function() { console.log('Build complete'); })
        .catch(function(err) { console.log(err); });
});

tsconfig.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "./dist"
  },
  "filesGlob": [
    "./dev/**/*.ts",
    "!./node_modules/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "typings"
  ]
}

让我知道您需要的更多信息。我不确定还有什么相关的。

0 个答案:

没有答案