angular - Trying to understand RxJS imports

Question

I'm having a hard time figuring out how exactly this import statement works (in an Angular application written in Typescript):

import 'rxjs/add/operator/toPromise';

I get that rxjs is mapped to the respective node_modules subfolder in the SystemJS config file, but then I'm stuck. I see that there is an index.js file but I don't see whether or how this helps to resolve the add/operator/... part.

Similarly, I don't understand this one:

import {Observable} from 'rxjs/Observable';

Again, there is no file Observable.* file in this place. I guess that it somehow works via the index.js file but I'd really like to get a more thorough understanding because I read that it is easy to import all of RxJS by accident which increases page load times.

I had a closer look at the Typescript module resolution documentation but I have the feeling that this is not sufficient to explain it.

Update: After reading the accepted answer below I figured out I had been looking at the node_modules/rx directory instead of node_modules/rxjs so the import statements match perfectly with the directory structure.

Answer 1

It's pretty simple because TypeScript by default looks into node_modules directory.

Importing the following:

import {Observable} from 'rxjs/Observable';

is resolved as node_modules/rxjs/Observable.d.ts which is enough to compile the code.

Similarly importing rxjs/add/operator/toPromise is resolved as node_modules/rxjs/add/operator/toPromise.ts. Btw you can use the --traceResolution compiler option to see what TypeScript path are tested.

When you have your compiled JS (eg. in commonjs format) you can run your app in node because it'll call require('rxjs/Observable') which will resolve to node_modules/rxjs/Observable.js. Then similarly with rxjs/add/operator/toPromise.

Be aware that the code structure of RxJS github page is different than the actual npm package. Basically, just the package.json and the src dir with compiled .js and .d.ts files are uploaded to the npm repository (the original .ts source files are in node_modules/rxjs/src but you never want to work directly with them).