Loading Compiled TypeScript Files in Browser with SystemJS
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.
[00:00] If you were to try and load this main.js file in the browser you'd get this warning saying requires not defined because TypeScript isn't bundling your files, and it's not using any sort of module loader, it's actually just configuring the output based upon the module type you pass out, or the type you defined in this module and then it's expecting you to set up your own module loader. We'll go ahead and system.js to load these up.
[00:26] First a bit of housecleaning where I just create a new folder called source, and I move my source files into there. That way with my .tsconfig I can say sourcemain and then my files from source will be compiled into dist, so I can run tsc and you can see that it compiled those two files from source. Now my root directory is clean, it just has the .tsconfig in it. Now to run this in the browser we need an index.html. I'll just do a bang, and then tab, which will generate a document for me.
[01:02] Then I need system.js which I'll use by generating a script tag, and then in my browser I'm going to hop over to NPM CDN/system.js and then add another forward slash to it will allow me to browse the files going to dist, and just find system.js, copy the link, and then paste it into the source. So now I'm just including the system.js file, there's nothing special to that. Then I just need to configure system.js so that it treats my dist directory as a package that it can load in.
[01:37] So I'll create a script tag in my body, let's say system.config, and this takes a configuration object where you can configure packages. Now the package that I want to configure is called dist to represent that dist directory. The default extension I want it to load with is simply .js, system.js can load many extensions, so I just want to tell it that we are actually loading JavaScript files, then the main file I want it to start with, or the entry file, whatever you want to call it is main.
[02:13] Now that I have this dist package configured, all I have to say is system.import dist. This will look up the package from this configuration and then load all those files in. I'll start a simple Web server, I'm going to use HTTPServer, it's the most basic one from NPM. You can grab that NPM install ghttpserver. I have it already installed, so I can just say httpserver and this flag cash -1 is going to tell it never to cache, so every time I reload the page it's going to serve up new files.
[02:48] Otherwise as it loads multiple files you'll run into caching issues. I have a server running on port 8080, so when I load port 8080 and I check out my network tab, so I'll refresh. You can see that it loads in system.js, then it loads in main, then it loads in two. Let's go ahead and make a change so that we can see this. I'll go into source, go into main, I'll say in the constructor that it should logout console log "I'm working."
[03:23] I'll hit save, I'll come over here and I'll compile, then switch back to my browser, hit refresh, and in my console you'll see nothing because I accidentally forgot to create a new instance of my app. So I'll do that now, we say new app, otherwise that constructor never gets invoked, so we'll compile again. Switch over to my browser, refresh, and you can see, "I am working." Just to show also that it's loading this two.js properly we'll switch over to two.ts, create a constructor here, say console log "I'm two."
[04:07] Then in my main I'll import two from two, and then create a new two. So now when I compile with a tsc, it's telling me that this is not a module, and that's because I did not export this. So we'll try this again, tsc, compiled fine. Go back to my browser, refresh, switch over to my console and you can see both, "I'm two," and "I'm working." Now to save me from running tsc each time I'll just to tsc -w and now any time I make a change here, so instead of "I'm two," I'll say, "I'm also working."
[04:52] Hit save, you can see it's changing my files. I'll open my browser, refresh, and you can see it caught that change for me.
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?
System.config({
packages: {
"dist": {
"defaultExtension": 'js',
"main": 'app'
}
}
});
System.import("dist")
Dont use equals "=", just send as parameter to config method
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
Include the output bundle in a script tag <script src="output.js"> then System.import('whatever-the-entry-file-is')
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 (<anonymous>) 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
Big thanks, John. I'm starting to love TypeScript.
~~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! :/
so basically System.js functions the same as Browserify?
This lesson is quite outdated.
Could not find systemjs at https://npmcdn.com.
However, I found a copy to use at https://cdnjs.com/libraries/systemjs