1

Angular 2 rc 6 coded in typescript

I've been using SystemJS-builder to bundle my scripts into one bundle.js, thus reducing my http requests tremendously. I use the buildStatic() method.

I've just noticed that when I use lazy-loaded routes, trying to navigate to such a route throws this error:

EXCEPTION: Uncaught (in promise): TypeError: this._system(...).import is not a function

Can SystemJS-builder be used to bundle an Angular 2 project that uses lazy loaded routes?

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"
  ]
}

Let me know what more info you need. I wasn't sure what else would be relevant.

BeetleJuice
  • 39,516
  • 19
  • 105
  • 165
  • I'm not really used to systemJS builders, but I think you are missing something here. As you are using gulp to transpile and serve the files, from what I'm used to see, you need SystemJS to map the JS files. See the systemjs.config.js from the angular.io quickstart : https://angular.io/docs/ts/latest/quickstart.html#!#create-and-configure Also, this is a question, but why use systemJS-builder ? I believe you can bundle everything using Gulp ? – Alex Beugnet Sep 03 '16 at 10:59
  • 1
    @AlexBeugnet I do have SystemJS mapping instructions. Remember: the app works if I load all my modules at bootstrap, including importing 3rd party libraries etc.... Those same mappings also work well when I don't use `systemjs-builder`. As to your question, I started using builder as a way to reduce the hundreds of http requests Angular makes at bootstraps into one `bundle.js`. I was inspired by this answer: http://stackoverflow.com/questions/35280582/angular2-too-many-file-requests-on-load/37082199#37082199 . I'd be happy to use `gulp` alone if I knew how but I'm new to `gulp` and bundling – BeetleJuice Sep 03 '16 at 14:58
  • Alright, thanks for answering. So your systemjs.config.js also contains the mapping part ? I don't really know since the error is kinda weird, but isn't it related to the initial import that Angular2 does with main.js ? – Alex Beugnet Sep 03 '16 at 15:14
  • @AlexBeugnet Yes my mapping is in *systemjs.config.js*. I made a mistake in the OP. The first code block was taken from *gulpfile.js*, not *systemjs.config.js* as I indicated. The app bootstraps fine, and all the modules loaded at bootstrap work, so the problem is not with importing *main.js* The error only manifests itself when I try to navigate to a lazy route and `Angular` tries to pull that module into the app – BeetleJuice Sep 03 '16 at 15:24
  • Alright, but then I admit I have no idea why this error is happening... – Alex Beugnet Sep 04 '16 at 09:56
  • 1
    @AlexBeugnet I think you were unto something. When I bundle, I actually don't include `systemjs` (with everything bundled in one file, there is no need). This works well when all is loaded at bootstrap. But it's no surprise anymore that `system.import` is undefined when a lazy route gets loaded (lazy module had no reference in initial files that SystemJS-loader could spot, so it's not in the bundle). Anyway, I think I'm better off learning to use the `angular-compiler` for Ahead-of-Time compilation. Thanks a lot for your help – BeetleJuice Sep 04 '16 at 13:31

0 Answers0