How compile some Typescript files in a bundle and load it with SystemJS?

Question

I have 2 files in TypeScript (I´ll create several more later), and I want to generate a unique JS file that other will use as a library.

At this moment, with the simplest exercise that join both files and loading them in a HTML file with SystemJS, I´m getting this error:

Error: (SystemJS) Multiple anonymous defines in module

I´m using TypeScript v1.8 and SystemJS v0.19.38. I have these 2 files:

Utils.ts

export const ValidatorRegExpEmail   = /^([_A-Za-z0-9-+]+(\.[_A-Za-z0-9-]+)*)+@([A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,}))$/;   // Christian

export class Validator {
    static isEmail ( s: string ) {
        return ValidatorRegExpEmail.test ( s.trim () );
    }
}

Main.ts

import { Validator } from "./Utils";
console.log ( Validator.isEmail ( "email@server.com" ) ) ;

tsconfig.json

{
"compilerOptions": {
     "module": "amd"
    ,"target": "es5"
    ,"sourceMap": true
},
"files": [
     "src/Utils.ts"
    ,"src/Main.ts"
]
}

I´m using gulp-typescript to compile and generate a unique JS file. And generate this file:

Main.js

define(["require", "exports"], function (require, exports) {
    "use strict";
    exports.ValidatorRegExpEmail = /^([_A-Za-z0-9-+]+(\.[_A-Za-z0-9-]+)*)+@([A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,}))$/; // Christian
    var Validator = (function () {
        function Validator() {
        }
        Validator.isEmail = function (s) {
            return exports.ValidatorRegExpEmail.test(s.trim());
        };
        return Validator;
    }());
    exports.Validator = Validator;
});

define(["require", "exports", "./Utils"], function (require, exports, Utils_1) {
    "use strict";
    console.log(Utils_1.Validator.isEmail("ghporras@gmail.com"));
});

Finally, in my HTML I have this loading:

<head>    
<script src="MyLibv1.0/vendor/system.js"></script>
 <script>
    System.config({
         baseURL: "MyLibv1.0/"
    });
    System.defaultJSExtensions = true;
    System.import("Main").catch(function(e)
    {
        console.error(e);
    });
</script>
...

Loading this html in Chrome I´m getting this error:

Error: (SystemJS) Multiple anonymous defines in module

If I change in tsconfig.json from

"module": "amd"

to:

"module": "system"

Then in Chrome I´m getting this error:

Error: (SystemJS) Multiple anonymous System.register
If loading a bundle, ensure all the System.register calls are named.

Why? What I´m doing wrong?

Concatenating module files does not produce a valid bundle that can be loaded by SystemJS. One possible way to do it is to set `outFile` instead of `outDir` in tsconfig.json - see https://www.typescriptlang.org/docs/release-notes/typescript-1.8.html#concatenate-amd-and-system-modules-with---outfile — artem, Sep 28 '16 at 19:06
Ah super @artem .. Now I have no errors. But in my Module.ts there is a console.log and it dont works. Any idea? — Gabrielizalo, Sep 28 '16 at 19:24
Then it seems like the same problem as [this one](http://stackoverflow.com/questions/39715307/systemjs-loading-build-file/39739892) — artem, Sep 28 '16 at 19:28
Thanks @artem. I added an export class with a fucntion and invoked it twice, but no look. Do you know an example for loading a function from SystemJS? — Gabrielizalo, Sep 28 '16 at 20:42
[This answer](http://stackoverflow.com/a/36315060/43848) contains complete example using gulp, also published on [github here](https://github.com/templth/angular2-packaging). In that example, the import that starts the app is [at the end of config.js file](https://github.com/templth/angular2-packaging/blob/master/config.js#L9). You can't really "load a function", you always load a module, then you can call a function that is exported by that module. — artem, Sep 28 '16 at 22:31
Thanks @artem for your time. Unfortunately I have been able to do it to work. Too complex for my actual knowledge... I´ll change my program to the traditional javascript without modules. ; ) — Gabrielizalo, Sep 29 '16 at 23:59

score 0 · Answer 1 · answered Sep 28 '16 at 22:34

You should use SystemJS Builder for this. Create the bundle as part of your build pipeline and then simply include load the bundle in browser.

var path = require("path");
var Builder = require('systemjs-builder');

// optional constructor options 
// sets the baseURL and loads the configuration file 
var builder = new Builder('path/to/baseURL', 'path/to/system/config-file.js');

builder
.bundle('local/module.js', 'outfile.js')
.then(function() {
  console.log('Build complete');
})
.catch(function(err) {
  console.log('Build error');
  console.log(err);
});

https://github.com/systemjs/builder

How compile some Typescript files in a bundle and load it with SystemJS?

Utils.ts

Main.ts

tsconfig.json

Main.js

1 Answers1