use typescript compiled files with systemjs

[rolandjitsu]

How do I use the compiled typescript files with systemjs? Can typescript compile in the System.register format as traceur can?

[mhegazy]

using latest from master or release-1.5, --module system would generate System.register compatible modules. here is a working example of using systemJs support: https://github.com/Microsoft/ngconf2015demo

[rolandjitsu]

@mhegazy I am actually just trying the master branch, but I seem to get into some trouble. I have a repo setup without TS, but I made a branch where I switched to TS.

I am a bit unsure how to solve this, because TS compiles just fine with no warnings, but when I try to run the app, it kind of fails (Cannot read property 'Task' of undefined, where Task is an angular component - es6 class).

[rolandjitsu]

I think it might have something to do with circular deps., but I am not sure.

[rolandjitsu]

@mhegazy I've just tested my theory, but it has proven wrong. How about moduleName? I think either traceur or system might expect a moduleName. At least that is what is different from the output I have when I use traceur to compile the ES6 files to ES5 (you can see some of the output of the compilation of ES6 to ES5 files here, if you look at the network and take one of the files there).

I've also seen that the output of typescript compiling the files does not have any trace of $traceurRuntime.

[mhegazy]

@rolandjitsu i believe the angular code still depends on traceure runtime. ngconfdemo is still pulling it in as well.
pinging @vladima for the system js portion of the process..

[vladima]

@rolandjitsu currently Angular2 still uses traceur and thus depends on traceur runtime..

[rolandjitsu]

@vladima, @mhegazy I've included traceur runtime as well. I am not quite sure where the issue occurs. But you should check the repo I made, you can see there my current setup of TS, Traceur and SystemJS.

Sent from my iPhone

On 09 Jun 2015, at 23:34, Mohamed Hegazy notifications@github.com wrote:

@rolandjitsu i believe the angular code still depends on traceure runtime. ngconfdemo is still pulling it in as well.
pinging @vladima for the system js portion of the process..

—
Reply to this email directly or view it on GitHub.

[rolandjitsu]

@mhegazy, @vladima I managed to setup TS eventually. The example you have from ngConf is using SystemJS to compile the ts files at runtime, but I am actually compiling before hand. So it wasn't that helpful.

I did not manage to make it work using the system module format, so I switched to commonjs and I added the cjs extension from SystemJS (I was only using the register ext.).

[vladima]

what is interesting, result angular.js in 'lib' folder does not have System.register call for 'angular2/angular2' module, however this call exists in 'angular2.dev.js' that is used in ngconf demo repo

[rolandjitsu]

@vladima are you talking about this? Because it's actually the very first line that registers angular2/angular2 if that is what you are talking about.

[HafizAhmedMoon]

How can I use Component instead of ComponentAnnotation as Component, when I use Component it's throw an Error: Error during instantiation of Token(ComponentRef)!. ORIGINAL ERROR: No Directive annotation found on App

[vladima]

@rolandjitsu yes, for some reason I was getting different content for angular.js depending on whether I use gulp or gulp play. Regarding the bug: these symptoms look similar to the issue that was fixed in es6 module loader 0.17 when it got TypeScript support. In short: if '.ts' file has multiple import/export statements with the same module name and it was compiled to system module - setter for only one of duplicate dependencies was called. Can you give a try to ES6 module loader/SystemJS 0.17 and see if this issue still exists?

[rolandjitsu]

@vladima I've actually got an older version of both, 16.6 I think. I will give it a try and see how that works out, let's hope I won't have that issue :)

[rolandjitsu]

@vladima once I've updated, everything breaks :) Something to do with defaultJSExtensions, if it is on, it breaks angular 2 when trying to load its modules.

But, as I mentioned before, I do not use TS with runtime compilation, I compile the files to js in commonjs or register format before and then System is using the compiled js files. Or is there some kind of confusion here? Because I can see the typescript.js file being asked in the ngConf demo and then System settings specifying that it should use the typescript compiler, which tells me that the compilation happens at runtime.

If that is the case, I am not sure how to make it work. Plus, I seem to have some other issues now that I upgraded SystemJS (es6 module loader is not necessary anymore).

[vladima]

there is an existing issue systemjs/systemjs#506 that tracks path related questions for TypeScript in SystemJS.

[ttowncompiled]

My team believes we found a bug today with TypeScript compilation to Systemjs.
This is the source code:

import {Type, isPresent} from 'angular2/src/facade/lang';
import {List, ListWrapper} from 'angular2/src/facade/collection';
import {ReflectionCapabilities} from './reflection_capabilities';
import {Reflector} from './reflector';
export {Reflector} from './reflector';

export var reflector = new Reflector(new ReflectionCapabilities());

This is the output:

System.register(['./reflector', './reflector', './reflection_capabilities'], function(exports_1) {
    var reflector_1, reflection_capabilities_1;
    var reflector;
    return {
        setters:[
            function (_reflector_1) {
                reflector_1 = _reflector_1;
            },
            function (_reflector_2) {
                exports_1("Reflector", _reflector_2["Reflector"]);
            },
            function (_reflection_capabilities_1) {
                reflection_capabilities_1 = _reflection_capabilities_1;
            }],
        execute: function() {
            exports_1("reflector", reflector = new reflector_1.Reflector(new reflection_capabilities_1.ReflectionCapabilities()));
        }
    }
});

This generates an error because the both reflector_1 and reflections_capabilities_1 are undefined. Even though the imports are specified in the source file, those imports are not being translated to the systemjs output.

We believe this might be caused by the fact that no name is ever being added to the registration call.
@mhevery

[LinboLen]

@ttowncompiled I have same problem in angular2 to js with system module

So I also hope typescript can remove dumplicate dependence, After I try to fix this problem in typescript compiler, It feel like it sames need more hours than i expect. I have to do it manually

following angular2 1.5.32 file have dumplicate dependence in system.register array

angular2\angular2.js
angular2\directives.js
angular2\http.js
angular2\src\change_detection\pipes\pipes.js
angular2\src\di\key.js
angular2\src\forms\directives.js

I use regex to fetch the error file, maybe it can help you

System\.register\(\[(?:'[\.\/_\-0-9a-zA-Z]+'\s*,?\s*)*('[\.\/_\-0-9a-zA-Z]+')\s*,?\s*(?:'[\.\/_\-0-9a-zA-Z]+'\s*,?\s*)*(?=\1)

[vladima]

Having duplicate entries in the list of dependencies should be perfectly fine, they should be handled correctly by SystemJS. If you are seeing some unexpected behavior related to duplicate entries, can you provide a repro as it is a bug that should be fixed.

I also would appreciate a repro for the original problem so it can be addressed as well

[LinboLen]

They have deleted duplicate entries,
https://github.com/systemjs/systemjs/blob/master/lib/register.js#L538
dedupe function
https://github.com/systemjs/systemjs/blob/master/lib/proto.js#L23
@guybedford

[rolandjitsu]

@xsilen building Angular 2 works just fine, the problem is with a _extend (or __extend) method that is created outside System.register. I cannot remember where the issue was reported, TypeScript or SystemJS repo, but it seems like it has not been resolved yet.

[LinboLen]

NO NO NO, it is going to wrong
above @ttowncompiled have pointed it out

System.register(['./reflector', './reflector', './reflection_capabilities'], function(exports_1) {
    var reflector_1, reflection_capabilities_1;
    var reflector;
    return {
        setters:[
            function (_reflector_1) {
                reflector_1 = _reflector_1;
            },
            function (_reflector_2) {
                exports_1("Reflector", _reflector_2["Reflector"]);
            },
            function (_reflection_capabilities_1) {
                reflection_capabilities_1 = _reflection_capabilities_1;
            }],
        execute: function() {
            exports_1("reflector", reflector = new reflector_1.Reflector(new reflection_capabilities_1.ReflectionCapabilities()));
        }
    }
});

Right code run perfect in current systemjs should be like this

System.register(['./reflector', './reflection_capabilities'], function(exports_1) {
    var reflector_1, reflection_capabilities_1;
    var reflector;
    return {
        setters:[
            function (_reflector_1) {
                reflector_1 = _reflector_1;
                exports_1("Reflector", _reflector_1["Reflector"]);
            },
            function (_reflection_capabilities_1) {
                reflection_capabilities_1 = _reflection_capabilities_1;
            }],
        execute: function() {
            exports_1("reflector", reflector = new reflector_1.Reflector(new reflection_capabilities_1.ReflectionCapabilities()));
        }
    }
});

I have fixed the feature(combine dumplicate dependence) in my local typescript compiler. i am checking if there are extra bug will make

[LinboLen]

It sames also have out scope variable declare bug, in higher systemjs, I use systemjs 0.14 and sames work well

[guybedford]

@xsilen are you saying that the fix in the latest SystemJS isn't working for you here? I'd be interested to hear why if this is the case?

[vladima]

Deduplication of dependencies was added in ##4257

[vpaulino]

hi there,
This thread is a little old but the behaviour you are describing is happening to me
See my post here:
http://stackoverflow.com/questions/37645591/typescript-is-not-generating-correct-system-register

[mhegazy]

@vpaulino why do you think this is related? the output in your SO question is what i would expect.

[vpaulino]

@mhegazy the dependencies modules are not generated in the call System.register( [] <-- the array is empty. what is that i'm doing wrong ? wasn't supposed that the constructor parameters be resolved by the parameters of System.Register array 1st argument ? why aren't they generated ?

[mhegazy]

Please see https://github.com/Microsoft/TypeScript/wiki/FAQ#why-are-imports-being-elided-in-my-emit