use typescript compiled files with systemjs

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

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

Mohamed Hegazy (@mhegazy)

Mohamed Hegazy (@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).

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

Mohamed Hegazy (@mhegazy)

Mohamed Hegazy (@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.

Roland Groza (@rolandjitsu)

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

Roland Groza (@rolandjitsu)

Roland Groza (@rolandjitsu) currently Angular2 still uses traceur and thus depends on traceur runtime..

Vladimir Matveev (@vladima)

Vladimir Matveev (@vladima), Mohamed Hegazy (@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:

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

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

Mohamed Hegazy (@mhegazy)

Mohamed Hegazy (@mhegazy), Vladimir Matveev (@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.).

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

Vladimir Matveev (@vladima)

Vladimir Matveev (@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.

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

Roland Groza (@rolandjitsu)

Roland Groza (@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?

Vladimir Matveev (@vladima)

Vladimir Matveev (@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 :)

Vladimir Matveev (@vladima)

Vladimir Matveev (@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).

Miško Hevery (@mhevery)

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.
Miško Hevery (@mhevery)

Ian Riley (@ttowncompiled)

Ian Riley (@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)

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

Guy Bedford (@guybedford)

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
Guy Bedford (@guybedford)

xsilen

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.

Ian Riley (@ttowncompiled)

NO NO NO, it is going to wrong
above Ian Riley (@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

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

xsilen

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?

Deduplication of dependencies was added in ##4257

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

Vitor Paulino (@vpaulino)

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

Mohamed Hegazy (@mhegazy)

Mohamed Hegazy (@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 ?

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

Navigation Menu

Repository navigation

use typescript compiled files with systemjs #3444

1 remaining item

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

use typescript compiled files with systemjs #3444

Description

Activity

mhegazy commented on Jun 9, 2015

rolandjitsu commented on Jun 9, 2015

rolandjitsu commented on Jun 9, 2015

rolandjitsu commented on Jun 9, 2015

mhegazy commented on Jun 9, 2015

vladima commented on Jun 9, 2015

rolandjitsu commented on Jun 10, 2015

rolandjitsu commented on Jun 10, 2015

vladima commented on Jun 11, 2015

rolandjitsu commented on Jun 11, 2015

HafizAhmedMoon commented on Jun 11, 2015

vladima commented on Jun 11, 2015

rolandjitsu commented on Jun 11, 2015

rolandjitsu commented on Jun 12, 2015

1 remaining item

ttowncompiled commented on Jun 18, 2015

LinboLen commented on Jul 25, 2015

vladima commented on Jul 25, 2015

LinboLen commented on Jul 26, 2015

rolandjitsu commented on Jul 27, 2015

LinboLen commented on Jul 27, 2015

LinboLen commented on Jul 31, 2015

guybedford commented on Aug 2, 2015

vladima commented on Aug 11, 2015

vpaulino commented on Jun 7, 2016

mhegazy commented on Jun 7, 2016

vpaulino commented on Jun 7, 2016

mhegazy commented on Jun 9, 2016

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions