RxJs with jspm and Typescript
I just had to add RxJs to an Angular project that is using jspm, typescript and ES6 modules. This all went pretty smoothly with a simple
However, when I came to use it I initially tried the same style import as with the jspm angular module, eg.
This gives an 'Rx is not defined' error as rx is a commonjs module, so not brashly exposing itself in the global namespace. This was easily fixed by changing to
Everything then worked as expected in the browser - except the Typescript compiler was now complaining that "Module '"rx"' has no default export."
Changing the above to "import {Rx} from 'rx'" didn't help. The only workaround I could find to keep the typescript compiler happy was to change the last line of the rx.d.ts file from
to
This change made everybody happy for now!
If there is a way to use ES6 import syntax with the jspm RxJs commonjs module without having to edit the rx.d.ts file please let me know.
EDIT: Thanks to Robert's comment below - turns out a better approach is to use the following import syntax, and this keeps the typescript compiler happy without having to edit rx.d.ts file.
jspm install rx
However, when I came to use it I initially tried the same style import as with the jspm angular module, eg.
import 'rx';
var eventsStream = new Rx.Subject();
This gives an 'Rx is not defined' error as rx is a commonjs module, so not brashly exposing itself in the global namespace. This was easily fixed by changing to
import Rx from 'rx';
Everything then worked as expected in the browser - except the Typescript compiler was now complaining that "Module '"rx"' has no default export."
Changing the above to "import {Rx} from 'rx'" didn't help. The only workaround I could find to keep the typescript compiler happy was to change the last line of the rx.d.ts file from
declare module "rx" { export = Rx; }
to
declare module "rx" { export default Rx; }
This change made everybody happy for now!
If there is a way to use ES6 import syntax with the jspm RxJs commonjs module without having to edit the rx.d.ts file please let me know.
EDIT: Thanks to Robert's comment below - turns out a better approach is to use the following import syntax, and this keeps the typescript compiler happy without having to edit rx.d.ts file.
import * as Rx from 'rx';
Comments
Post a Comment