Gabotron Gabotron - 2 months ago 31
TypeScript Question

RxJs with TypeScript: How generate Production files for Web?

I´d like to create a JS Lib using RxJs (5.0.0-Beta.6) and TypeScript (1.8.10).

My simple TypeScript file is compiling. I have this files:

MyLib.ts:

/// <reference path="../../typings/globals/es6-shim/index.d.ts" />
import * as Rx from 'rxjs/Rx';
Rx.Observable.of('foo', 'bar');


tsconfig.json:

{
"compilerOptions": {
"module": "commonjs"
,"target": "es5"
,"sourceMap": true
},
"files": [
"src/MyLib.ts"
]
}


I´m using gulp-typescript to generate JS file and it generate this file:

MyLib.js:

"use strict";
var Rx=require("rxjs/Rx");
Rx.Observable.of("foo","bar");


Now I need to have this file in an HTML. RxJs needs dependencies so I have copied these ones:


  • RxJs 5.0.0 Beta 6 >> node_modules/rxjs/bundles/Rx.min.js

  • SystemJS 0.19.38 >> node_modules/systemjs/dist/system.js

  • RequireJS 2.3.2 >> node_modules/requirejs/require.js



This is my HTML:



<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>MyLib Test</title>

<script src="vendor/require.js"></script>
<script src="vendor/system.js"></script>
<script src="vendor/Rx.min.js"></script>
<script src="MyLib.js"></script>

</head>
<body>

</body>
</html>





My problem:

I´m getting this error in Chrome Console:

Uncaught Error: Module name "rxjs/Rx" has not been loaded yet for context: _. Use require([])

I haven't been able to load this simple JS: MyLib.js made with RxJs and TypeScript.

What is my problem and how can I fix it?

Answer

You have forgot to configure your module loader (and for some reason included two of them (require and systemjs)).

You should leave only one and your html with systemjs will look somewhat similar to:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MyLib Test</title>
    <script src="vendor/system.js"></script>
    <script>
        System.config({
            paths: {
                "rxjs": 'vendor/rx/dist/rx.min'
            }    
        });

        System.defaultJSExtensions = true;

        //This will bootstrap your app
        System.import('myLib').catch(function(e)
        {
            console.error(e);
        });;
    </script>
</head>
<body>

</body>
</html>

Hope this helps.

Comments