Angular doesn't start using SystemJS bundle

Question

I've been experimenting a strange behivour since two weeks ago.

I have thinking about and I have decided to make a repo and make tests in order to isolate the problem.

It's a simple repo extracted from angular/quickstart. I have added a gulp file to build a bundle and when I have tryed to load it, I get the same problem. The application not start.

This is the config of systemjs: https://github.com/tolemac/systemjs-test/blob/master/systemjs.config.js

This is the gulpfile to build the bundle: https://github.com/tolemac/systemjs-test/blob/master/gulpfile.js

And this is the repo: https://github.com/tolemac/systemjs-test

Instructions to reproduce:

mkdir systemjs-test
cd systemjs-test
git clone https://github.com/tolemac/systemjs-test.git .
npm install
gulp bundle
npm start

I found using SystemJS builder to be buggy. To see if that's the case for you, look at the unminified bundle, and see if it makes sense. I saw non-sensical output (like true === true kinda thing), so I gave up on it and used rollup for bundling instead. — Michael Kang, Mar 15 '17 at 22:14
buff, webpack is superuberengineer!! too many sofisticated. And slow with ts. — Javier Ros, Mar 17 '17 at 21:43

Michael Kang · Answer 1 · 2017-03-16T17:09:28.600

I tried out your repo, and as suspected the bundle it produces does not look right:

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? 
      factory(exports, require('@angular/core')) : 
      'function' === 'function' && true ? System.registerDynamic('npm:@angular/compiler/bundles/compiler.umd.js', ['@angular/core'], false, function ($__require, $__exports, $__module) {
        if (typeof factory === 'function') {
            return factory.call($__exports, $__exports, $__require('@angular/core'));
        } else {
            return factory;
        }

Something is wrong here. Notice the 'function' === 'function' && true ? statement...

I suggest using Rollup to bundle your app.

Demo Starter App

I have made some tests and it's works if I don't include angular bundles in the vendor bundle. Then I think your response the best. — Javier Ros, Mar 17 '17 at 21:43

score 1 · Accepted Answer · answered Mar 18 '17 at 20:13

1

Well, I have been spend more and more time with it.

I have learned a lot reading the source code of systemjs, systemjs-builder and the babel plugins used by the builder to identify the module loader code of loaded modules. All only for realize that the problem is that SystemJS don't identify the format of the bundle module... due to that, systemjs don't execute the loaded code... then the solution was to set the format of the bundle via configuration, this way:

packages: {
  ...
  ...
  ...
  'bundles/vendor.js': {
    format: "system"
  }
}

Solved!

answered Mar 18 '17 at 20:13

Javier Ros

3,511
2
21
41

@pixelbits I have been able to see from where came `'function' === 'function' && true ?`, systemjs-builder use babel compiler to obtain the AST of the each module to locate the expressions where it uses `define` and others. The builder replace this expressions in order to obtain a true expression and replace `define` by `System.dynamicRegister`. After these days studing webpack, rollup and systemjs, I confirm my declination for systemjs for big apps. I would use rollup for packages and libraries, and webpack for small applications that you have to release and deploy quickly. – Javier Ros Mar 18 '17 at 20:21
1

This is great, thanks for looking into this so thoroughly! – Michael Kang Mar 18 '17 at 20:56

Angular doesn't start using SystemJS bundle

2 Answers2