This lesson has been retired.

Video Processing Status: completed

No video source files were found yet. Check back in an hour. If there's still a problem let us know.

Become a member
to unlock all features

    Loading Compiled TypeScript Files in Browser with SystemJS

    John LindquistJohn Lindquist

    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.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    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.