SystemJS Builder, Bundle without Angular2 for Lazyloading

Question

I am trying to bundle my application with systemjs builder. Its a "core" Application which has angular2 in it. The other components are loaded lazily into the core then. At the moment Iam bundle my core, which works, but the other components then get 404 because they are searching for the old paths of angular2.

I want to have the components bundled, but without angular2, the components then are using the one in my core. I tought I am using buildStatic for this? I am only compiling the ts files to js.

Some snippets what I tried:

Building the core which works:

gulp.task('bundle:js', function() {
    var builder = new SystemBuilder('dist', './src/systemjs.config.js');
    return builder.buildStatic('app', 'dist/app.js');
});

In my index.html I am loading then the app.js file. Which is around 2MB now.

Then the lazy loaded component is searching for: https://IP/@angular/router-deprecated which results in 404.

Now to the "hard" part:

   gulp.task('build:static', function () {
  var builder = new SystemBuilder('', './dist/systemjs.config.js');
  builder.buildStatic('dist/start.component.js', 'dist/start.component.static.js', {
    defaultExtension: 'js',
  globalName: 'test',
  globalDeps: {
    '@angular': '@angular'
  }
});
});

After this I get an JS file which is around 1,1MB. So I think there is no angular2 in it?

If I now try to start my application it tells me:

EXCEPTION: Error: Uncaught (in promise): No Directive annotation found on StartComponent

I have an directives in my StartComponent. What is my fault? Is this even possible how I am doing it?

Thanks!

Answer 1

I needed to use "system.bundle()" to get that working.