System.register-Issue setting up Angular Quickstart

Initial problem

Not sure if this is the right place to ask but I am facing this issue while setting up the quickstart tutorial for Angular.

I am using gulp for tsc, bundling and hosting (gulp-)webserver.

My tsc-gulp-task in the gulpfile.js looks like that:

var gulpTypescript = require('gulp-typescript');
var tscConfig = require('./tsconfig.json');

gulp.task('tsc', function () {
    return gulp.src('src/**/*.ts')
        .pipe(gulpTypescript(tscConfig.compilerOptions))
        .pipe(gulp.dest('/gen'));
});

The main.ts looks like that (It's the one Angular2 Quickstart provides):

import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';

bootstrap(AppComponent);

This task generates two .js-Files which I am concatenating with gulp-bundle-assets to the final main.js. This file is located in build/lib/

My final bundled main.js looks like that (shortened):

System.register(['angular2/core'], function(exports_1, context_1) {
    var __moduleName = context_1 && context_1.id;
    ..
}};
System.register(['angular2/platform/browser', './app.component'], function(exports_1, context_1) {
    var __moduleName = context_1 && context_1.id;    
    ..
}};

The chrome console gives me the following error:

Error: Multiple anonymous System.register calls in module https://localhost:8000/lib/main.js. If loading a bundle, ensure all the System.register calls are named.

So actually I don't know what is wrong with the main.js. Maybe someone else does?

New problem (after solving the upper one)

There are no console error logs shown in Chrome anymore - That's cool, but the Angular module is still not loading..

I guess that there is a problem with the System.js loader and my bundled main.js file (which actually is not the compiled main.ts file - It is the bundled main.js + app.component.js file - Renaming might be good..).

My index.html looks like that:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>index.html</title>
    <link rel="stylesheet" href="./lib/main.css">
    <script type="text/javascript" src="lib/vendor.js"></script>

    <script>
        System.config({
            packages: {
                lib: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });
        System.import('lib/main')
                .then(null, console.error.bind(console));
    </script>
</head>
<body>
    <my-app>Loading...</my-app>
</body>
</html>

The build/-directory (which is the root directory for gulp-webserver) is structured like that:

build/
- lib/
  - maps/
  - main.css
  - main.js
  - vendor.js // bundled node_module-files
- index.html

When I split the main.js into main.js + app.component.js (and modify the references in the index.html) then the Angular-Module is loading fine.

Solution

Your problem is at the level of the concatenation. In fact, you can't concatenate your JS files (the ones that are compiled from TypeScript ones) using gulp-bundle-assets.

You should use the outFile option of the tsc compiler (see tscConfig.compilerOptions). It will compile all your TypeScript files into a single JS one. In this case, the module names will be explicitly defined when registering them:

System.register('app/component', ['angular2/core'], function(exports_1, context_1) {
  var __moduleName = context_1 && context_1.id;
  ..
}};
System.register('app/main', ['angular2/platform/browser', './app.component'], function(exports_1, context_1) {
  var __moduleName = context_1 && context_1.id;    
  ..
}};

instead of:

System.register(['angular2/core'], function(exports_1, context_1) {
  var __moduleName = context_1 && context_1.id;
  ..
}};
System.register(['angular2/platform/browser', './app.component'], function(exports_1, context_1) {
  var __moduleName = context_1 && context_1.id;    
  ..
}};