These are chat archives for systemjs/systemjs

6th
Dec 2017
Julián Molina
@phalcondroid
Dec 06 2017 03:49
Hi guys, sorry, im noob in system.js, buy i want to ask something...
I have a project with typescript, and this compile something like this
System.register("North", [], function (exports_1, context_1) {
    "use strict";
    var __moduleName = context_1 && context_1.id;
    var North;
    return {
        setters: [],
        execute: function () {
            North = class North {
                constructor() {
                    console.log("estoy jugando");
                }
            };
            exports_1("North", North);
        }
    };
});
System.register("Main", ["North"], function (exports_2, context_2) {
    "use strict";
    var __moduleName = context_2 && context_2.id;
    var North_1;
    return {
        setters: [
            function (North_1_1) {
                North_1 = North_1_1;
            }
        ],
        execute: function () {
            new North_1.North();
        }
    };
});
but i cant execute Main module, for example
in typescript would be like this
//North.ts
export class North
{
    public constructor()
    {
        console.log("estoy jugando");
    }
}
and Main.ts
//Main.ts
import { North } from "./North";

new North();
and i have a index.html with this config
Julián Molina
@phalcondroid
Dec 06 2017 03:55
<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.47/system.src.js"></script>
    </head>
    <body>
        <script>
            System.import("main.js").then(function () {
                customer();
            });
        </script>
    </body>
</html>
Thanks, guys if you can help me
Aluan Haddad
@aluanhaddad
Dec 06 2017 11:33
@phalcondroid main.ts doesn't export anything. What error are you getting?
Oh and you aren't configuring SystemJS so main.js would need to be beside index.html for that to work. Lastly your file name casing is inconsistent so that should be fixed.
Julián Molina
@phalcondroid
Dec 06 2017 15:48
@aluanhaddad Thank you for your answer
Aluan Haddad
@aluanhaddad
Dec 06 2017 15:48
sure thing
Julián Molina
@phalcondroid
Dec 06 2017 15:48
I want to execute North or any class with system.js, I previously applied this configuration
System.defaultJSExtensions = true;
            System.import('./main-js')
                .then(null, console.error.bind(console));
@aluanhaddad i just want to execute any class
:(
Aluan Haddad
@aluanhaddad
Dec 06 2017 15:53
Where is main.js?
Julián Molina
@phalcondroid
Dec 06 2017 15:54
Screen Shot 2017-12-06 at 10.53.12 AM.png
in the root
Aluan Haddad
@aluanhaddad
Dec 06 2017 15:54
why do you have different casing? That seems weird. TypeScript would compile them into files with the same name.
Julián Molina
@phalcondroid
Dec 06 2017 15:55
is cofigured in tsconfig
Screen Shot 2017-12-06 at 10.54.51 AM.png
Aluan Haddad
@aluanhaddad
Dec 06 2017 15:55
I see
Oh, I'm silly, I know what the issue is
Since you are using --outfile it is creating a named register bundle.
Julián Molina
@phalcondroid
Dec 06 2017 15:59
when i remove --outfile typescript compile 2 files
Aluan Haddad
@aluanhaddad
Dec 06 2017 16:01
Just name your file the same as the module you are trying to execute
Julián Molina
@phalcondroid
Dec 06 2017 16:01
@aluanhaddad Thank you very much aluan, thats works removing outFile,
Aluan Haddad
@aluanhaddad
Dec 06 2017 16:01
But you don't want to do that
I wasn't suggesting that
I mean you might want to, but either will work
Julián Molina
@phalcondroid
Dec 06 2017 16:02
thank you :)
Aluan Haddad
@aluanhaddad
Dec 06 2017 16:02
for sure, glad to help.
Note what you have above:
System.register("North", [], function (exports_1, context_1) {
});
System.register("Main", ["North"], function (exports_2, context_2) {
});
So importing main.js doesn't cause Main to be executed.
Julián Molina
@phalcondroid
Dec 06 2017 16:03
Yes, typescript created the two files differently
Aluan Haddad
@aluanhaddad
Dec 06 2017 16:05
To run the bundle, you need to include a script tag (or use bundle config but that is more advanced)
Then you would write
<script src="main.js"></script>
<script>
  SystemJS.import('Main'); // note the name.
</script>
That is because bundles, such as those created by tsc --outfile main.js --module system behave differently since they are meant for deployment.
It is important that loading such a bundle does not run the execute block.
Julián Molina
@phalcondroid
Dec 06 2017 16:09
Ok, Aluan i will change this code i will try againg
Aluan Haddad
@aluanhaddad
Dec 06 2017 16:11
Honestly it all depends on what you are trying to accomplish. At development time, individual files is often ideal.
In production it is more complex but there are tradeoffs. Caching vs number of requests, and so on
Julián Molina
@phalcondroid
Dec 06 2017 16:12
then, what should i do in production? package all files?
Aluan Haddad
@aluanhaddad
Dec 06 2017 16:13
Usually bundling is used for production.
There are a lot of ways. You can also use the SystemJS builder to create a bundle instead of using tsc --outfile
Julián Molina
@phalcondroid
Dec 06 2017 16:26
:)
Aluan Haddad
@aluanhaddad
Dec 06 2017 16:33
:smile: