Using TypeScript when installing packages from npm often requires you to install related definition files. This lesson shows you how to use typings to install es6-shim then how to configure SystemJS to load from node_modules.
There are few projects on NPM that already include the definition files or the typings like RxJS. If I go ahead and just saved that. You've installed RxJS from NPM.
Now, I'll switch over to my main, and you'll see if I import RxJS, that it's going to throw some errors here about can't find promise. One way to fix this in the future will be to hop over to our tsconfig, switch over to a target of ES 6. That way, promises and all the ES 6 features will be available.
Just to show what I mean, I'll restart the types of compiler. Sometimes, if you change the tsconfig, you usually need to restart the types of compilers, what gets all those changes from your configuration.
Then if you switch over to main.js, you can see that use this classes and other ES 6 features, that it wouldn't have used if it would've been ES 5. We'll hit that, and I'll recompile. You can see you run into these promise errors again when we're targeting ES 5, and it's doing classes in the ES 5 way.
What we need to do is typings, install ES 6-shim. We'll save it. We're also going to throw in the ambient flag so that goes out the looks for ES 6-shim in all possible locations. I'll find it the different repository than the normal one.
We got ES 6-shim. You'll see that in the typings now. If I look into my browser, ambient, there is my ES 6-shim definition file. Then all my errors went away. Now on my main.ts, I can import RxJS just fine.
Even though RxJS had its definitions inside of node modules, it relied on some ES 6 features like promises, where you need to go out and get the ES 6-shim, which someday you won't need to do, because you could just target ES 6. For now, it's much safer to target ES 5. I'll go ahead and use my RxJS.
Import, let's say, observable, grab observable off of it. Then, I'm also going to want to import RxJS, add observable timer. So, I can do something like observable timer. Every one second, push out a value. We'll subscribe to that. Then just log out the output. Now, when I hit save and this recompiles, I won't get any errors. But when I refresh, I'll run into that same can't find the things that I tried to import.
Remember, type script does not do anything to load these for you. It just is going to write these require statements, and you need to configure how to load them yourself. In this case, from node modules, we're going to map RxJS to node modules/RxJS. Make sure I had the comma there. Now, we'll hit save. I'll refresh.
You'll see this time a little bit different behavior. Now, it's trying to load add/observable/timer, which is a directory or a file without an extension, meaning that we need to configure another package, this one being RxJS.
Let's switch that over to interval, import interval as well, switch this to interval, hit save. This will compile for us, so I'll refresh. Now, we get true, zero, one two, It's running this interval.
You can see on our main that it's requiring interval and in our network, that it's loading in all the things necessary, each individual file necessary to make those work, because now we've mapped our system JS so that any files it needs, it's going to look in RxJS and load all those individual files.
I just want to re-emphasize, no matter what sort of module loader you use, whether it's system JS or anything else, there will be configuration required on how you load it up, because type script is just outputting files and you need to tell these files what it's supposed to do with require.