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.
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.