Typescript import statements for Rxjs operators

Question

I have one Angular project where things like the RxJs library operators, map,do etc are not imported. There appears to be no wildcard imports in the source.

Both my Ionic and Angular projects do:

import { Observable } from 'rxjs';

Then I have an Ionic project which complains if I don't explicity state the imports.

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';

Furthermore in the Ionic project, I can't seem to locate refCount in node_modules folders for RxJS either. Though now, I'm beginning to think I need a specific package like rx.lite.js for that... I have no idea how rx.lite.js and and rx.lite-aggregates.js got added to the Angular project in the node_modules folder. I don't get that in my Ionic project. There's not an explicit reference to them in the package.json for the Angular project. Some sort of transitive dependency perhaps?

The Angular project was something I got from a Git repo, so I'm wondering if there is some sort of configuration file that does this somewhere else in the project. I'm wondering if someone can help shed some light on this mystery for me.

• Angular project package.json rxjs dependency

  "rxjs": "^5.1.0",
  

• Angular project tsconfig.json

  {
    "compileOnSave": false,
    "compilerOptions": {
      "declaration": false,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "lib": [
        "es2016"
      ],
      "module": "commonjs",
      "moduleResolution": "node",
      "outDir": "../dist/out-tsc-e2e",
      "sourceMap": true,
      "target": "es6",
      "typeRoots": [
        "../node_modules/@types"
      ]
    }
  }
  

• Ionic project package.json rxjs dependency

  "rxjs": "5.1.1",
  

• Ionic project tsconfig.json

  {
     "compilerOptions": {
       "allowSyntheticDefaultImports": true,
       "declaration": false,
       "emitDecoratorMetadata": true,
       "experimentalDecorators": true,
       "lib": [
         "dom",
         "es2015"
       ],
       "module": "es2015",
       "moduleResolution": "node",
       "sourceMap": true,
       "target": "es5"
     },
     "include": [
       "src/**/*.ts"
     ],
    "exclude": [
      "node_modules"
     ],
   "compileOnSave": false,
   "atom": {
     "rewriteTsconfig": false
   }
  

  }

I have been trying to make sense of tsconfig.json. See this link

Answer 1

rxJs has a bunch of different import techniques. I was very confused until I read this: Understanding Operator Imports

note that, if you use this import technique (you probably should):

import {myOperator} from 'rxjs/operators/myOperator';

...to actually use myOperator, you need to envoke it's call method, or pass it in to the pipe operator:

myOperator.call(parameters);

The pipe operator seems out of the scope of this topic. Just know that it provides a way to bypass this .call syntax and importantly, allows you to effectively chain multiple operators that are imported this way. See the link for more details (really, it's super-helpful).

Lastly, Type Errors abound with rxjs operators in Ionic, especially if you are using angularfire2 (version 5). Sometimes you can resolve these errors by casting the object provided by Angularfire as Observable<..some type..>

Answer 2

This most likely depends on the structure of your source code.

In general, you should never import from 'rxjs' and always import a specific module. For example:

import { Observable } from 'rxjs/Observable';

When you do import { Observable } from 'rxjs' you're importing Rx.ts file that adds all the operators already which means you don't need to call any import 'rxjs/add/operator/...'; because the operators are already imported.

For example if you have an Angular project and in the root module you add import { Observable } from 'rxjs' you'll never need to import any operators separately even though you're not using any Observable in the root module at all.

I think your situation is exactly the same. It just depends on where you're importing from 'rxjs' and if it happens before you try to use any of the operators.

For this reason angular-cli by default blacklists importing from 'rxjs'.