3

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.

SilverJan
  • 434
  • 5
  • 16

1 Answers1

1

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;    
  ..
}};
Thierry Templier
  • 198,364
  • 44
  • 396
  • 360
  • 1
    In fact you don't need to configure SystemJS since your module names are now within the single generated file. I know what the module names you have in this file but simpy the one for main for the initial import. – Thierry Templier Mar 25 '16 at 13:36
  • Could you go more in detail with your second sentence? I actually thought that SystemJS doesn't know "where to start" in my main.js file. If there is no bundled file, then there is no problem in loading the main.js (compiled main.ts, not the bundled one) file and bootstrapping the component. – SilverJan Mar 25 '16 at 16:26
  • There is a related question in this regard: [How to invoke a javascript function (generated from typescript) trapped within “System.register()” module?](https://stackoverflow.com/q/51096798/514235). Can you help in that to find out the right syntax. I want to know how to call such functions from Html. – iammilind Jun 29 '18 at 16:36