3
votes

I have setup my Angular2 project using JSPM and SystemJS. I try to import RxJS and a few operators in my boot.ts file but my import does NOT get transpiled into the boot.js output. So

// boot.ts
import {Observable} from 'rxjs/Observable'
import 'rxjs/add/operator/debounceTime'
...

as outlined here: https://github.com/ReactiveX/RxJS#es6-via-npm ends up as

// boot.js
System.register(['rxjs/add/operator/debounceTime', ...

tsc (tried with 1.7.5 and 1.8.0):

// tsconfig.json
{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": false,
    "module": "system",
    "moduleResolution": "node",
    "rootDir": "src",
    "target": "es5"
  }

  , "exclude": [
    "jspm_packages",
    "node_modules",
    "typings/main.d.ts",
    "typings/main"
  ]
}

What am I missing???

UPDATE

TypeScript will only emit the import if it is used later in the code. I just needed the additional operators to listen to a valueChanges observable to an Angular2 control. However, the additional operators cannot be patched if the Observable class of rxjs is missing. So you kind of need to force TypeScript to emit the System.register for Observable by importing like this:

// boot.ts
import 'rxjs/Observable'
import 'rxjs/add/operator/debounceTime'
...

All credit goes to @RyanCavanaugh who pointed me into the right direction.

2
Thanks for the speedy reply import 'rxjs/Observable' did the job. - TylerDurden

2 Answers

1
votes

The answer from the comments, which successfully resolved the issue:

import 'rxjs/Observable'

Reference: https://github.com/Microsoft/TypeScript/wiki/FAQ#why-are-imports-being-elided-in-my-emit

0
votes

You need to import the Observable class the right way:

import { Observable } from 'rxjs/Observable';

Or the following if you want to include all operators in the same time:

import { Observable } from 'rxjs/Rx';