The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Loading Compiled TypeScript Files in Browser with SystemJS

Loading Compiled TypeScript Files in Browser with SystemJS

5:00
TypeScript outputs JavaScript, but what are you supposed to do with it? This lesson shows how to take the output and use SystemJS as the module loader so that you can use the files in your browser.
Watch this lesson now
Avatar
egghead.io

TypeScript outputs JavaScript, but what are you supposed to do with it? This lesson shows how to take the output and use SystemJS as the module loader so that you can use the files in your browser.

Avatar
prwcoder

Could not find systemjs at https://npmcdn.com.

However, I found a copy to use at https://cdnjs.com/libraries/systemjs

Avatar
Arun

I'm getting an error on the lines of "system.js:4 Uncaught (in promise) Error: (SystemJS) Unexpected token <".
Here is my System.config object:
System.config = {
packages: {
"dist": {
"defaultExtension": "js",
"main": "main"
}
}
};
System.import("dist");

Any suggestions?

Avatar
Serkan
System.config({
    packages: {
        "dist": {
            "defaultExtension": 'js',
            "main": 'app'
        }
    }
});

System.import("dist")

Dont use equals "=", just send as parameter to config method

In reply to Arun
Avatar
Raphi

Hi John, thanks for this great video, which includes a bunch of useful tips in addition to the main topic.

I want my Typescript code to compile into a single JS file. I've accomplished this using the simple tsconfig parameter outFile. However I now have a single file with many SystemJS modules. How do I load all of those modules into my index.html? I can't get it to work

Avatar
John

Include the output bundle in a script tag <script src="output.js"> then System.import('whatever-the-entry-file-is')

In reply to Raphi
Avatar
Jobelo Andres Quintero Rodriguez

I'm getting this error on my console when I open the url:

common.js:83 Uncaught (in promise) Error: two_1.Two is not a constructor
Evaluating http://localhost:3005/dist/main.js
Loading dist
at Object.eval (main.js:3)
at eval (main.js:12)
at eval (main.js:13)
at eval ()
at Pe (evaluate.js:106)
at instantiate.js:365
at j (register-loader.js:658)
at S (register-loader.js:609)
at x (register-loader.js:518)
at register-loader.js:119

Someone help me please, thank you

Avatar
Victor

Big thanks, John. I'm starting to love TypeScript.

Avatar
Sports

~~So if you are running http-server -c-1 in ts-lessons folder ... how are you able to access index.html? Because it's in src folder and when I go to http://localhost:8080 it just shows me the list of directories/files.~~

Got it, index.html goes into the ts-lessons directory and not the src one. :)

P.S. Also, the strikethrough markdown doesn't seem to be working here! :/

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?