Rxjs: TypeError: __extends is not a function

[timfogarty1549]

I have an angular 2 app that works fine with 5.0.0-rc.1 but fails to load with 5.0.0-rc.2 thru 5. The error in the console (line numbers for rc.5) is

home:40 Error: (SystemJS) __extends is not a function
TypeError: __extends is not a function
at eval (http://localhost:3000/node_modules/rxjs/bundles/Rx.js:345:5)
at Object.eval (http://localhost:3000/node_modules/rxjs/bundles/Rx.js:356:2)
at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:229:26)
at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:113:43)
at http://localhost:3000/node_modules/zone.js/dist/zone.js:509:57
at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:262:35)
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:151:47)
at drainMicroTaskQueue (http://localhost:3000/node_modules/zone.js/dist/zone.js:405:35)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:336:25)
Error loading http://localhost:3000/main
at eval (http://localhost:3000/node_modules/rxjs/bundles/Rx.js:345:5)
at Object.eval (http://localhost:3000/node_modules/rxjs/bundles/Rx.js:356:2)
at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:229:26)
at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:113:43)
at http://localhost:3000/node_modules/zone.js/dist/zone.js:509:57
at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:262:35)
at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:151:47)
at drainMicroTaskQueue (http://localhost:3000/node_modules/zone.js/dist/zone.js:405:35)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:336:25)
Error loading http://localhost:3000/main

[nmors]

I am also having the same issue

Uncaught TypeError: __extends is not a function(…) Rx.js:345 
  (anonymous function) @ Rx.js:345
  (anonymous function) @ Rx.js:356
  execCb @ require.min.js:1
  check @ require.min.js:1enable @ require.min.js:1
  init @ require.min.js:1callGetModule @ require.min.js:1
  completeLoad @ require.min.js:1onScriptLoad @ require.min.js:1

Using latest version from npm, almost vanilla app, no ui frameworks etc apart from jquery so far..

My Version installed from $ npm ls

...
└─┬ [email protected]
  └── [email protected]

[benlesh]

Hmm... this seems like some strange SystemJS thing. That __extends method is something for classes generated by TypeScript.

@robwormald, have you seen this with SystemJS in the past?

FWIW, I use the bundled version from bundles/Rx.js all the time, and I haven't run into this issue, but I'm not using System.js.

[benlesh]

@timfogarty1549 or @nmors do either of you have a minimum example you can share to help us debug this issue?

[robwormald]

digging through the rc5 system bundle, it all looks OK to me.

@timfogarty1549 w/ angular2 i'd strongly suggest using a bundler rather than the bundles Rx provides.

[nording]

I'm also having the same issue.
What I have found out is that since rc.2 the helper functions (tslib) that adds __extends, __assign, __decorate, __param, __metadata and __awaiter is never executed if you are using SystemJS.
It is only executed if you import "tslib".
This is different from the rc.1, where the __extends function is created anyway.
When bundles/Rx.js is used, it breaks in the function "UnsubscriptionError" because that is where it look likes __extends first is executed.

[hartjus]

I'm seeing this same error on my Angular2, luckily I'm getting it while running Karma and not at runtime.

Any ideas on how to fix this?

Angular2 2.3.1
rxjs 5.0.0-rc4
Typescript: 2.0.2

Rx.js:388 Uncaught TypeError: __extends is not a function
    at http://localhost:9876/base/dist/libs/rxjs/bundles/Rx.js:388:5
    at http://localhost:9876/base/dist/libs/rxjs/bundles/Rx.js:399:2
    at root (http://localhost:9876/base/dist/libs/rxjs/bundles/Rx.js:340:6)
    at http://localhost:9876/base/dist/libs/rxjs/bundles/Rx.js:341:2(anonymous function) @ Rx.js:388(anonymous function) @ Rx.js:399root @ Rx.js:340(anonymous function) @ Rx.js:341

core.umd.js:4041 Uncaught TypeError: Cannot read property 'prototype' of undefined
    at __extends$6 (http://localhost:9876/base/dist/libs/@angular/core/bundles/core.umd.js:4041:72)
    at http://localhost:9876/base/dist/libs/@angular/core/bundles/core.umd.js:4089:9
    at http://localhost:9876/base/dist/libs/@angular/core/bundles/core.umd.js:4143:6
    at http://localhost:9876/base/dist/libs/@angular/core/bundles/core.umd.js:9:6
    at http://localhost:9876/base/dist/libs/@angular/core/bundles/core.umd.js:10:2

I'm loading up the rxjs bundles through /rxjs/bundles/Rx.js into my karma.conf.js

{pattern: 'dist/libs/rxjs/bundles/Rx.js', included: true, watched: false},
            {pattern: 'dist/libs/rxjs/**/*', included: false, watched: false},

in my systemJS config file, I have:
'rxjs': {main: 'bundles/Rx.min.js', defaultExtension: 'js'},

[kwonoj]

Anyone experiencing this issue, would you mind to add bit more details?

• which package of rxjs you're using? (umd vs. cjs...)
• configuration of repo : TypeScript version, rxjs import configuration (i.e systemjs, webpack, etcs else)
• (optional): any barebone code repo repduces this issue

[edobry]

@kwonoj I am loading the global UMD distribution of RxJS through require.js, no config whatsoever besides specifying the file path.

[nording]

I created a plnkr where the issue is available:
https://plnkr.co/edit/fTWLTjnbUV2R1P9EkSA9

[kwonoj]

My gut feeling at this moment is this is somewhat related to https://github.com/ReactiveX/rxjs/pull/2093 / https://github.com/ReactiveX/rxjs/pull/2121 since it seems it's missing known helper function signature from TypeScript. (not saying given PR is invalid, seems somehow not play along with some configurations)

[dtniland]

I was trying to switch from rxjs-es to @reacitvex/rxjs and ran into this error when I pointed my files at the dist/es6 files directly. I had assumed that those files would be completely written in es6 and fit in nicely with our current es6 modules, but found that the files only used es6-style modules without the body of those modules being transpiled to es6. It seems that this __extends function comes with the cjs-style module system somehow, and that in mixing the es5 code body with es6 modules, the _extend function was stranded in there.

Then I noticed the npm script:
"compile_module_es6": "tsc ./dist/es6/src/Rx.ts ./dist/es6/src/add/observable/of.ts -m es2015 --sourceMap --outDir ./dist/es6 --target ES5 -d --diagnostics --pretty --noImplicitAny --noImplicitReturns --noImplicitThis --suppressImplicitAnyIndexErrors --moduleResolution node --noEmitHelpers --lib es5,es2015.iterable,es2015.collection,es2015.promise,dom ",

notice -target ES5 and --lib es5
WTH? This seems like a pretty careless copy-paste error. when I change -target to ES6 and start --lib es6, then it all compiles as expected and the __extends magically disappears.

So I know how to fix it, but it's quite inconvenient for my automated build system to have to cd into node_modules, hit npm install for this library, change the package.json, then run the modified compile_module_es6 script. Either that or I just put the modified files in my local npm repo and point to that in my projects.

Or... someone can fix the script and check in the new files and upload them to npm. I would be happy to check in a fix for the npm scripts, but I don't know what procedure you use for updating your npm version.

[kwonoj]

@dtniland uh..actually @reactivex/rxjs should not include es6 dist anymore, not sure how it did included again. (https://github.com/ReactiveX/rxjs/pull/2019)

There are some histories of native ES2015 module and final conclusion is release version of RxJS does not publish es6 package as well, notice -target ES5 and --lib es5 WTH? This seems like a pretty careless copy-paste error. : this is even intended (though I agree script name is super confusing) for internal-use-only to generate UMD build (https://github.com/ReactiveX/rxjs/pull/2093#discussion_r85589111)

So in your case, I'd like to suggest to use cjs / global under @reactivex package or directly install cjs via npm install rxjs. Actually your detailed explanation may be answer to all of this issue that some of users are accidentally referring unintended package published.

[benlesh]

@kwonoj ... it seems there was an accidental publish. Obviously my fault. We're not cleaning out the dist/es6 directory on clean up. So if I published the docs, which require the building of es6, then it's sitting in there and gets published. :\ That's unfortunate.

[edobry]

@blesh will RxJS 5 continue to support AMD?

[benlesh]

@edobry the bundled output is UMD so it will work with AMD, yes.

[dtniland]

Why would you not publish es6 modules? Telling everyone to use cjs seems a bit 2014 of you... not everyone wants to transpile from typescript, either. Is there a discussion on this somewhere?

I thought you guys were all gung-ho on es6. At least you were last year. Did those guys leave the team?

[trxcllnt]

@dtniland context

[dtniland]

@trxcllnt thanks. Very illuminating. I didn't realize I was in such a minority. Well, for the time being I'll have to run the tsc script myself and use my private npm repo. Oh well, rxjs is still better than bacon.

[benlesh]

@dtniland Sorry about any ergonomic pain it's causing you, but we don't want to publish the wrong thing and then break a bunch of people down the road.

[imcotton]

__extends's missing in UMD bundle should resolved by #2121 I think, but it's still on waiting.

[Flounn]

@imcotton Thx if your ticket resolve this bug.
Actually, we need to rebuild rxjs to work with Angular 2. We cannot use the Rx.min.js in the bundles directory

[n370]

Guys I've been trying to setup a basic project using [email protected], [email protected] and [email protected] and I'm getting this very same error as you'll see if you don't mind to take a look on this repo I created to share the issue with you.

https://github.com/n370/systemjs-rxjs5-typescript2-boilerplate/tree/not-working

Fire it up with npm install && npm start

I appreciate any help.

[xonuzofa]

I upgraded my rxjs from 5.0.0-rc 5 to 5.0.3 and got this same issue. I was using
rxjs': { main: 'bundles/Rx.js', defaultExtension: 'js' }

According to the readme file:

To import the entire core set of functionality:

import Rx from 'rxjs/Rx';

So I changed my code to this:
rxjs': { main: 'Rx.js', defaultExtension: 'js' }

Working fine now.

[klemenoslaj]

I can reproduce this issue as well, but using requirejs.
Is there any temporary fix for that?

[mgechev]

The definition of __extends exists in the UMD bundle since as part of the rxjs' build process tslib.js is prepended into the beginning of the files.

You can hit the issue if you're loading the rxjs bundle with SystemJS because of tslib.js itself:

// tslib.js
(function (factory) {
    ...
    if (typeof define === "function" && define.amd) {
        define("tslib", ["exports"], function (exports) { factory(createExporter(root, createExporter(exports))); });
    }
...

In case of SystemJS included into the page, define is a function, and define.amd is a truthy value. This will invoke define, which unfortunately is asynchronous and will push the factory into the queue. In the meantime because of the hoisting in JavaScript, __extends will has value undefined and on top of that will override all previous definitions of __extends. This happens because in versions of SystemJS v0.19.29 and newer, Rx.js will be wrapped into IIFE. This will cause the following:

// Previous definitions of the helpers
window.__extends = ...;
...

// Rx.js bundle, wrapped by IIFE by SystemJS
(function (System, ..) {
var __extends;
//...
var UnsubscriptionError = (function (_super) {
    // _extends === undefined, because of hoisting
    __extends(UnsubscriptionError, _super);
    function UnsubscriptionError(errors) {
...
}(System, ...));

If you use SystemJS v0.19.28 and include reference to tslib.js manually in your index.html file everything should work.

This doesn't seem like an issue in rxjs, maybe tslib.js, since such async definition doesn't seem right to me.

PS: SystemJS v0.19.28 works because it still hasn't introduced this change.

[n370]

Amazing @mgechev! It works perfectly now.

[sumtec]

Hi @mgechev ,

Thank you for your information but it just fixed half of the problem.

I am trying to use AngularJS 2.4.3. The version of System.js and Rxjs are 0.19.40 and 5.0.3. Before referencing the tslib.js in the index file, it popped up two error. One is regular error and the other one is ZoneAwareError. After referencing the tslib.js, the first one disappeared. However the second one is still there. Like this:

ZoneAwareErrormessage: "(SystemJS) __extends is not a function↵ TypeError: __extends is not a function↵     at eval (http://localhost:55811/lib/rxjs/rx.js:385:5)↵      at Object.eval (http://localhost:55811/lib/rxjs/rx.js:396:2)↵       at Object.eval (http://localhost:55811/appScripts/boot.js:5:34)↵        at eval (http://localhost:55811/appScripts/boot.js:11:4)↵       at eval (http://localhost:55811/appScripts/boot.js:12:3)↵       at eval (<anonymous>)↵  Evaluating http://localhost:55811/appScripts/boot.js↵   Error loading http://localhost:55811/appScripts/boot.js"name: "Error"originalErr: TypeError: __extends is not a function
    at eval (http://localhost:55811/lib/rxjs/rx.js:385:5)
    at Object.eval (http://localhost:55811/lib/rxjs/rx.js:396:2)
    at s (http://localhost:55811/lib/systemjs/system.js:5:19930)
    at c (http://localhost:55811/lib/systemjs/system.js:5:6225)
    at c (http://localhost:55811/lib/systemjs/system.js:5:6187)
    at c (http://localhost:55811/lib/systemjs/system.js:5:6187)
    at c (http://localhost:55811/lib/systemjs/system.js:5:6187)
    at d (http://localhost:55811/lib/systemjs/system.js:5:5844)
    at http://localhost:55811/lib/systemjs/system.js:5:6303
    at a (http://localhost:55811/lib/systemjs/system.js:5:17131)
    at Object.eval (http://localhost:55811/appScripts/boot.js:5:34)
    at eval (http://localhost:55811/appScripts/boot.js:11:4)
    at eval (http://localhost:55811/appScripts/boot.js:12:3)
    at eval (<anonymous>)
    at a.ee (http://localhost:55811/lib/systemjs/system.js:4:21980)originalStack: "Error: (SystemJS) __extends is not a function↵   TypeError: __extends is not a function↵     at eval (http://localhost:55811/lib/rxjs/rx.js:385:5)↵      at Object.eval (http://localhost:55811/lib/rxjs/rx.js:396:2)↵       at Object.eval (http://localhost:55811/appScripts/boot.js:5:34)↵        at eval (http://localhost:55811/appScripts/boot.js:11:4)↵       at eval (http://localhost:55811/appScripts/boot.js:12:3)↵       at eval (<anonymous>)↵  Evaluating http://localhost:55811/appScripts/boot.js↵   Error loading http://localhost:55811/appScripts/boot.js↵    at ZoneAwareError (http://localhost:55811/lib/zone.js/zone.js:738:33)↵    at t (http://localhost:55811/lib/systemjs/system.js:4:1662)↵    at p (http://localhost:55811/lib/systemjs/system.js:4:13348)↵    at http://localhost:55811/lib/systemjs/system.js:4:12921↵    at g (http://localhost:55811/lib/systemjs/system.js:4:14601)↵    at b (http://localhost:55811/lib/systemjs/system.js:4:14949)↵    at f (http://localhost:55811/lib/systemjs/system.js:4:12903)↵    at m (http://localhost:55811/lib/systemjs/system.js:4:13257)↵    at http://localhost:55811/lib/systemjs/system.js:4:11567↵    at ZoneDelegate.invoke (http://localhost:55811/lib/zone.js/zone.js:242:26)↵    at Zone.run (http://localhost:55811/lib/zone.js/zone.js:113:43)↵    at http://localhost:55811/lib/zone.js/zone.js:535:57↵    at ZoneDelegate.invokeTask (http://localhost:55811/lib/zone.js/zone.js:275:35)↵    at Zone.runTask (http://localhost:55811/lib/zone.js/zone.js:151:47)↵    at drainMicroTaskQueue (http://localhost:55811/lib/zone.js/zone.js:433:35)"stack: "(SystemJS) __extends is not a function↵  TypeError: __extends is not a function↵     at eval (http://localhost:55811/lib/rxjs/rx.js:385:5)↵      at Object.eval (http://localhost:55811/lib/rxjs/rx.js:396:2)↵       at Object.eval (http://localhost:55811/appScripts/boot.js:5:34)↵        at eval (http://localhost:55811/appScripts/boot.js:11:4)↵       at eval (http://localhost:55811/appScripts/boot.js:12:3)↵       at eval (<anonymous>)↵  Evaluating http://localhost:55811/appScripts/boot.js↵   Error loading http://localhost:55811/appScripts/boot.js"toString: toString()zoneAwareStack: "Error: (SystemJS) __extends is not a function↵ TypeError: __extends is not a function↵     at eval (http://localhost:55811/lib/rxjs/rx.js:385:5)↵      at Object.eval (http://localhost:55811/lib/rxjs/rx.js:396:2)↵       at Object.eval (http://localhost:55811/appScripts/boot.js:5:34)↵        at eval (http://localhost:55811/appScripts/boot.js:11:4)↵       at eval (http://localhost:55811/appScripts/boot.js:12:3)↵       at eval (<anonymous>)↵  Evaluating http://localhost:55811/appScripts/boot.js↵   Error loading http://localhost:55811/appScripts/boot.js↵    at t (http://localhost:55811/lib/systemjs/system.js:4:1662) [<root>]↵    at p (http://localhost:55811/lib/systemjs/system.js:4:13348) [<root>]↵    at http://localhost:55811/lib/systemjs/system.js:4:12921 [<root>]↵    at g (http://localhost:55811/lib/systemjs/system.js:4:14601) [<root>]↵    at b (http://localhost:55811/lib/systemjs/system.js:4:14949) [<root>]↵    at f (http://localhost:55811/lib/systemjs/system.js:4:12903) [<root>]↵    at m (http://localhost:55811/lib/systemjs/system.js:4:13257) [<root>]↵    at http://localhost:55811/lib/systemjs/system.js:4:11567 [<root>]↵    at Zone.run (http://localhost:55811/lib/zone.js/zone.js:113:43) [<root> => <root>]↵    at http://localhost:55811/lib/zone.js/zone.js:535:57 [<root>]↵    at Zone.runTask (http://localhost:55811/lib/zone.js/zone.js:151:47) [<root> => <root>]↵    at drainMicroTaskQueue (http://localhost:55811/lib/zone.js/zone.js:433:35) [<root>]"__proto__: Objectconstructor: Error()message: ""name: "Error"toString: toString()__proto__: Object
ZoneDelegate.invoke @ zone.js:242
Zone.run @ zone.js:113
(anonymous) @ zone.js:535
ZoneDelegate.invokeTask @ zone.js:275
Zone.runTask @ zone.js:151
drainMicroTaskQueue @ zone.js:433
ZoneTask.invoke @ zone.js:349
XMLHttpRequest.send (async)
scheduleTask @ zone.js:1725
ZoneDelegate.scheduleTask @ zone.js:255
Zone.scheduleMacroTask @ zone.js:168
(anonymous) @ zone.js:1749
send @ VM1009:3
G @ system.js:4
(anonymous) @ system.js:4
ZoneAwarePromise @ zone.js:551
(anonymous) @ system.js:4
(anonymous) @ system.js:5
(anonymous) @ system.js:5
(anonymous) @ system.js:5
(anonymous) @ system.js:5
(anonymous) @ system.js:5
(anonymous) @ system.js:5
(anonymous) @ system.js:4
ZoneDelegate.invoke @ zone.js:242
Zone.run @ zone.js:113
(anonymous) @ zone.js:535
ZoneDelegate.invokeTask @ zone.js:275
Zone.runTask @ zone.js:151
drainMicroTaskQueue @ zone.js:433
ZoneTask.invoke @ zone.js:349
XMLHttpRequest.send (async)
scheduleTask @ zone.js:1725
ZoneDelegate.scheduleTask @ zone.js:255
Zone.scheduleMacroTask @ zone.js:168
(anonymous) @ zone.js:1749
send @ VM1009:3
G @ system.js:4
(anonymous) @ system.js:4
ZoneAwarePromise @ zone.js:551
(anonymous) @ system.js:4
(anonymous) @ system.js:5
(anonymous) @ system.js:5
(anonymous) @ system.js:5
(anonymous) @ system.js:5
(anonymous) @ system.js:5
(anonymous) @ system.js:5
(anonymous) @ system.js:4
ZoneDelegate.invoke @ zone.js:242
Zone.run @ zone.js:113
(anonymous) @ zone.js:535
ZoneDelegate.invokeTask @ zone.js:275
Zone.runTask @ zone.js:151
drainMicroTaskQueue @ zone.js:433
ZoneTask.invoke @ zone.js:349
XMLHttpRequest.send (async)
scheduleTask @ zone.js:1725
ZoneDelegate.scheduleTask @ zone.js:255
Zone.scheduleMacroTask @ zone.js:168
(anonymous) @ zone.js:1749
send @ VM1009:3
G @ system.js:4
(anonymous) @ system.js:4
ZoneAwarePromise @ zone.js:551
(anonymous) @ system.js:4
(anonymous) @ system.js:5
(anonymous) @ system.js:5
(anonymous) @ system.js:5
(anonymous) @ system.js:5
(anonymous) @ system.js:5
(anonymous) @ system.js:5
(anonymous) @ system.js:4
ZoneDelegate.invoke @ zone.js:242
Zone.run @ zone.js:113
(anonymous) @ zone.js:535
ZoneDelegate.invokeTask @ zone.js:275
Zone.runTask @ zone.js:151
drainMicroTaskQueue @ zone.js:433
ZoneTask.invoke @ zone.js:349
XMLHttpRequest.send (async)
scheduleTask @ zone.js:1725
ZoneDelegate.scheduleTask @ zone.js:255
Zone.scheduleMacroTask @ zone.js:168
(anonymous) @ zone.js:1749
send @ VM1009:3
G @ system.js:4
(anonymous) @ system.js:4
ZoneAwarePromise @ zone.js:551
(anonymous) @ system.js:4
(anonymous) @ system.js:5
(anonymous) @ system.js:5
(anonymous) @ system.js:5
(anonymous) @ system.js:5
(anonymous) @ system.js:5
(anonymous) @ system.js:5
(anonymous) @ system.js:4
ZoneDelegate.invoke @ zone.js:242
Zone.run @ zone.js:113
(anonymous) @ zone.js:535
ZoneDelegate.invokeTask @ zone.js:275
Zone.runTask @ zone.js:151
drainMicroTaskQueue @ zone.js:433
ZoneTask.invoke @ zone.js:349

It's pretty annoying because I tried switch system.js back to 0.19.28 but it didn't work. It seems like the AngularJS 2.4.3 is using something new in the Rxjs. I just don't know what next can I do. Switch back to earlier version of the AngularJS2 to user earlier version of Rxjs?

Thanks at lot.

---

P.S.: If you are using Edge to debug it. It will show a completely different error like this:

Error: (SystemJS) Object expected
    TypeError: Object expected
       at Anonymous function (eval code:385:5)
       at Anonymous function (eval code:384:1)
       at Anonymous function (eval code:5:1)
       at Anonymous function (eval code:1:31)
       at eval code (eval code:1:2)
    Evaluating http://localhost:55811/appScripts/boot.js
    Error loading http://localhost:55811/appScripts/boot.js
   at t (http://localhost:55811/lib/systemjs/system.js:4:1617) [<root>]
   at p (http://localhost:55811/lib/systemjs/system.js:4:13346) [<root>]
   at Anonymous function (http://localhost:55811/lib/systemjs/system.js:4:12921) [<root>]
   at g (http://localhost:55811/lib/systemjs/system.js:4:14589) [<root>]
   at b (http://localhost:55811/lib/systemjs/system.js:4:14947) [<root>]
   at f (http://localhost:55811/lib/systemjs/system.js:4:12903) [<root>]
   at m (http://localhost:55811/lib/systemjs/system.js:4:13251) [<root>]
   at Anonymous function (http://localhost:55811/lib/systemjs/system.js:4:11567) [<root>]

(Man! I am so missing the good old desktop development environment. You don't have to figure out WTH they are doing. Yes, I know there was a stage called DLL hell but they are no longer an issue I think.

[xonuzofa]

Show me your systemjs.config.js file.

[sumtec]

@xonuzofa Here's my config:
(

Please note:

1. I was upgrading from the 2.0.0-RCx. The "rxjs" used to be configured as the line commented out, with no paths section. It worked fine in the old setup with RC version. The paths section was introduced after the upgrade because it will otherwise cannot find a whole bunch of 'operator/add' etc.
2. All the libraries are put into the "lib" folder but my own app was put into the "appScript" folder.

)

System.config({
    //baseUrl:'lib',
    defaultJSExtensions: true,    
    paths: {
            'rxjs*': '/lib/rxjs/rx.js',
    },
    packages: {
        'appScripts': {
            main: 'boot'
        },
        '@angular/common': {
            main: 'common.umd.js',
        },
        '@angular/compiler': {
            main: 'compiler.umd.js',
        },
        '@angular/core': {
            main: 'core.umd.js',
        },
        '@angular/http': {
            main: 'http.umd.js',
        },
        '@angular/platform-browser': {
            main: 'platform-browser.umd.js',
        },
        '@angular/platform-browser-dynamic': {
            main: 'platform-browser-dynamic.umd.js',
        },
        '@angular/upgrade': {
            main: 'upgrade.umd.js',
        },
        '@angular/forms': {
            main: 'forms.umd.js',
        },
        '@angular/router': {
            main: 'router.umd.js',
        },
        '@angular/router-deprecated': {
            main: 'router-deprecated.umd.js',
        },
        materialize: {
            main: 'js/materialize',
            format: 'global'
        },
        'angular2-materialize': {
            main: 'index'
        },
        'tslib':{
            main: 'tslib'
        },
        rxjs: {
            main: 'rx',
            //format: 'register',
            //defaultExtension: 'js'
        },
    },
    map: {
        '@angular': '/lib/@angular',
        '@angular/common': '/lib/@angular/common',
        '@angular/compiler': '/lib/@angular/compiler',
        '@angular/core': '/lib/@angular/core',
        '@angular/http': '/lib/@angular/http',
        '@angular/platform-browser': '/lib/@angular/platform-browser',
        '@angular/platform-browser-dynamic': '/lib/@angular/platform-browser-dynamic',
        '@angular/upgrade': '/lib/@angular/upgrade',
        materialize: '/lib/materialize',
        'angular2-materialize': '/lib/angular2-materialize',
        'tslib': '/lib/tslib',
        //rxjs: '/lib/rxjs',
        appScripts: '/appScripts'
    }
});

[xonuzofa]

Try this:

(function(global) {

// map tells the System loader where to look for things
var map = {
    'appScripts':                 '/appScripts',
    'rxjs':                       '/lib/rxjs',
        'tslib':                      '/lib/tslib',
        '@angular':                   '/lib/@angular',
        'materialize':                '/lib/materialize',
        'angular2-materialize':       '/lib/angular2-materialize'
};

// packages tells the System loader how to load when no filename and/or no extension
var packages = {
    'appScripts':                 { main: 'boot.js',  defaultExtension: 'js' },
    'rxjs':                       { main: 'Rx.js', defaultExtension: 'js' },
    'tslib':                      { main: 'tslib.js', defaultExtension: 'js' },
        'materialize:                 { main: 'js/materialize.js', format: 'global', defaultExtension: 'js' },
        'angular2-materialize':       { main: 'index.js', defaultExtension: 'js' },
};

var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/forms',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/material',
        '@angular/upgrade'
];

// add package entries for angular packages in the form '@angular/common': { main: 'bundles/common.umd.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'bundles/' + pkgName.replace('@angular/','') + '.umd.js', defaultExtension: 'js' };
});

var config = {
    map: map,
    packages: packages
}

// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }

System.config(config);

})(this);

Call it from index.html or whatever like so before your boot:

<!-- 2. Configure SystemJS -->
<script src="/systemjs.config.js"></script>
<script>System.import('app/boot').then(null, console.error.bind(console));</script>

[ORESoftware]

I am using RequireJS + TypeScript + RxJS5 and I got this issue

it seems to be solved by using a shim with RequireJS which loads tslib before loading rxjs:

    shim: {
        'rxjs':{
            deps: ['tslib']
        }
    }

tslib is here: https://github.com/Microsoft/tslib

[sumtec]

Hi @xonuzofa ,

Thanks but It doesn't help.

With your config, it complained that the angular's js files were not found before I changed my file structure. After fixing the file structure, it complained the lots of 404s from the RxJs library just like it were not a bundle but actually it is.

And that's why I changed it to use the following config according to a post which I can't find out anymore.

    paths: {
            'rxjs*': '/lib/rxjs/rx.js',
    },

And by reading the config, there is not much difference between my original config. The only change is use a piece of javascript to change the packages to "bundles/"+"original package".

Can you explain why you think your solution would work? Maybe I can get some idea about how to fix it. :)

Cheers

[xonuzofa]

I feel like you either don't have the same version of rxjs as me or you didn't install it the same.

Did you use npm to install the packages? In my package.json I have "rxjs": "5.0.3" and using npm install I get a node_modules/rxjs folder, which does not contain a rx.js.

My Rx.js file in node_modules/rxjs/Rx.js is as follows:

"use strict";
/* tslint:disable:no-unused-variable */
// Subject imported before Observable to bypass circular dependency issue since
// Subject extends Observable and Observable references Subject in it's
// definition
var Subject_1 = require('./Subject');
exports.Subject = Subject_1.Subject;
exports.AnonymousSubject = Subject_1.AnonymousSubject;
/* tslint:enable:no-unused-variable */
var Observable_1 = require('./Observable');
exports.Observable = Observable_1.Observable;
// statics
/* tslint:disable:no-use-before-declare */
require('./add/observable/bindCallback');
require('./add/observable/bindNodeCallback');
require('./add/observable/combineLatest');
require('./add/observable/concat');
require('./add/observable/defer');
require('./add/observable/empty');
require('./add/observable/forkJoin');
require('./add/observable/from');
require('./add/observable/fromEvent');
require('./add/observable/fromEventPattern');
require('./add/observable/fromPromise');
require('./add/observable/generate');
require('./add/observable/if');
require('./add/observable/interval');
require('./add/observable/merge');
require('./add/observable/race');
require('./add/observable/never');
require('./add/observable/of');
require('./add/observable/onErrorResumeNext');
require('./add/observable/pairs');
require('./add/observable/range');
require('./add/observable/using');
require('./add/observable/throw');
require('./add/observable/timer');
require('./add/observable/zip');
//dom
require('./add/observable/dom/ajax');
require('./add/observable/dom/webSocket');
//operators
require('./add/operator/buffer');
require('./add/operator/bufferCount');
require('./add/operator/bufferTime');
require('./add/operator/bufferToggle');
require('./add/operator/bufferWhen');
require('./add/operator/catch');
require('./add/operator/combineAll');
require('./add/operator/combineLatest');
require('./add/operator/concat');
require('./add/operator/concatAll');
require('./add/operator/concatMap');
require('./add/operator/concatMapTo');
require('./add/operator/count');
require('./add/operator/dematerialize');
require('./add/operator/debounce');
require('./add/operator/debounceTime');
require('./add/operator/defaultIfEmpty');
require('./add/operator/delay');
require('./add/operator/delayWhen');
require('./add/operator/distinct');
require('./add/operator/distinctUntilChanged');
require('./add/operator/distinctUntilKeyChanged');
require('./add/operator/do');
require('./add/operator/exhaust');
require('./add/operator/exhaustMap');
require('./add/operator/expand');
require('./add/operator/elementAt');
require('./add/operator/filter');
require('./add/operator/finally');
require('./add/operator/find');
require('./add/operator/findIndex');
require('./add/operator/first');
require('./add/operator/groupBy');
require('./add/operator/ignoreElements');
require('./add/operator/isEmpty');
require('./add/operator/audit');
require('./add/operator/auditTime');
require('./add/operator/last');
require('./add/operator/let');
require('./add/operator/every');
require('./add/operator/map');
require('./add/operator/mapTo');
require('./add/operator/materialize');
require('./add/operator/max');
require('./add/operator/merge');
require('./add/operator/mergeAll');
require('./add/operator/mergeMap');
require('./add/operator/mergeMapTo');
require('./add/operator/mergeScan');
require('./add/operator/min');
require('./add/operator/multicast');
require('./add/operator/observeOn');
require('./add/operator/onErrorResumeNext');
require('./add/operator/pairwise');
require('./add/operator/partition');
require('./add/operator/pluck');
require('./add/operator/publish');
require('./add/operator/publishBehavior');
require('./add/operator/publishReplay');
require('./add/operator/publishLast');
require('./add/operator/race');
require('./add/operator/reduce');
require('./add/operator/repeat');
require('./add/operator/repeatWhen');
require('./add/operator/retry');
require('./add/operator/retryWhen');
require('./add/operator/sample');
require('./add/operator/sampleTime');
require('./add/operator/scan');
require('./add/operator/sequenceEqual');
require('./add/operator/share');
require('./add/operator/single');
require('./add/operator/skip');
require('./add/operator/skipUntil');
require('./add/operator/skipWhile');
require('./add/operator/startWith');
require('./add/operator/subscribeOn');
require('./add/operator/switch');
require('./add/operator/switchMap');
require('./add/operator/switchMapTo');
require('./add/operator/take');
require('./add/operator/takeLast');
require('./add/operator/takeUntil');
require('./add/operator/takeWhile');
require('./add/operator/throttle');
require('./add/operator/throttleTime');
require('./add/operator/timeInterval');
require('./add/operator/timeout');
require('./add/operator/timeoutWith');
require('./add/operator/timestamp');
require('./add/operator/toArray');
require('./add/operator/toPromise');
require('./add/operator/window');
require('./add/operator/windowCount');
require('./add/operator/windowTime');
require('./add/operator/windowToggle');
require('./add/operator/windowWhen');
require('./add/operator/withLatestFrom');
require('./add/operator/zip');
require('./add/operator/zipAll');
/* tslint:disable:no-unused-variable */
var Subscription_1 = require('./Subscription');
exports.Subscription = Subscription_1.Subscription;
var Subscriber_1 = require('./Subscriber');
exports.Subscriber = Subscriber_1.Subscriber;
var AsyncSubject_1 = require('./AsyncSubject');
exports.AsyncSubject = AsyncSubject_1.AsyncSubject;
var ReplaySubject_1 = require('./ReplaySubject');
exports.ReplaySubject = ReplaySubject_1.ReplaySubject;
var BehaviorSubject_1 = require('./BehaviorSubject');
exports.BehaviorSubject = BehaviorSubject_1.BehaviorSubject;
var ConnectableObservable_1 = require('./observable/ConnectableObservable');
exports.ConnectableObservable = ConnectableObservable_1.ConnectableObservable;
var Notification_1 = require('./Notification');
exports.Notification = Notification_1.Notification;
var EmptyError_1 = require('./util/EmptyError');
exports.EmptyError = EmptyError_1.EmptyError;
var ArgumentOutOfRangeError_1 = require('./util/ArgumentOutOfRangeError');
exports.ArgumentOutOfRangeError = ArgumentOutOfRangeError_1.ArgumentOutOfRangeError;
var ObjectUnsubscribedError_1 = require('./util/ObjectUnsubscribedError');
exports.ObjectUnsubscribedError = ObjectUnsubscribedError_1.ObjectUnsubscribedError;
var TimeoutError_1 = require('./util/TimeoutError');
exports.TimeoutError = TimeoutError_1.TimeoutError;
var UnsubscriptionError_1 = require('./util/UnsubscriptionError');
exports.UnsubscriptionError = UnsubscriptionError_1.UnsubscriptionError;
var timeInterval_1 = require('./operator/timeInterval');
exports.TimeInterval = timeInterval_1.TimeInterval;
var timestamp_1 = require('./operator/timestamp');
exports.Timestamp = timestamp_1.Timestamp;
var TestScheduler_1 = require('./testing/TestScheduler');
exports.TestScheduler = TestScheduler_1.TestScheduler;
var VirtualTimeScheduler_1 = require('./scheduler/VirtualTimeScheduler');
exports.VirtualTimeScheduler = VirtualTimeScheduler_1.VirtualTimeScheduler;
var AjaxObservable_1 = require('./observable/dom/AjaxObservable');
exports.AjaxResponse = AjaxObservable_1.AjaxResponse;
exports.AjaxError = AjaxObservable_1.AjaxError;
exports.AjaxTimeoutError = AjaxObservable_1.AjaxTimeoutError;
var asap_1 = require('./scheduler/asap');
var async_1 = require('./scheduler/async');
var queue_1 = require('./scheduler/queue');
var animationFrame_1 = require('./scheduler/animationFrame');
var rxSubscriber_1 = require('./symbol/rxSubscriber');
var iterator_1 = require('./symbol/iterator');
var observable_1 = require('./symbol/observable');
/* tslint:enable:no-unused-variable */
/**
 * @typedef {Object} Rx.Scheduler
 * @property {Scheduler} queue Schedules on a queue in the current event frame
 * (trampoline scheduler). Use this for iteration operations.
 * @property {Scheduler} asap Schedules on the micro task queue, which uses the
 * fastest transport mechanism available, either Node.js' `process.nextTick()`
 * or Web Worker MessageChannel or setTimeout or others. Use this for
 * asynchronous conversions.
 * @property {Scheduler} async Schedules work with `setInterval`. Use this for
 * time-based operations.
 * @property {Scheduler} animationFrame Schedules work with `requestAnimationFrame`.
 * Use this for synchronizing with the platform's painting
 */
var Scheduler = {
    asap: asap_1.asap,
    queue: queue_1.queue,
    animationFrame: animationFrame_1.animationFrame,
    async: async_1.async
};
exports.Scheduler = Scheduler;
/**
 * @typedef {Object} Rx.Symbol
 * @property {Symbol|string} rxSubscriber A symbol to use as a property name to
 * retrieve an "Rx safe" Observer from an object. "Rx safety" can be defined as
 * an object that has all of the traits of an Rx Subscriber, including the
 * ability to add and remove subscriptions to the subscription chain and
 * guarantees involving event triggering (can't "next" after unsubscription,
 * etc).
 * @property {Symbol|string} observable A symbol to use as a property name to
 * retrieve an Observable as defined by the [ECMAScript "Observable" spec](https://github.com/zenparsing/es-observable).
 * @property {Symbol|string} iterator The ES6 symbol to use as a property name
 * to retrieve an iterator from an object.
 */
var Symbol = {
    rxSubscriber: rxSubscriber_1.$$rxSubscriber,
    observable: observable_1.$$observable,
    iterator: iterator_1.$$iterator
};
exports.Symbol = Symbol;
//# sourceMappingURL=Rx.js.map

It seems to me that you are not using the correct file to link, thus cannot find any of the files that you need.

Another issue you may be having is not moving the entire folder over to my wwwroot folder which is where all my compiled js/html/css files are, as well as lib, yours is libs.

gulp.task("scriptsNStyles", () => {
gulp.src([
        'systemjs/dist/system-polyfills.js',
        'systemjs/dist/system.src.js',
        'rxjs/**',
        'zone.js/dist/**',
        '@angular/**',
        'angular-in-memory-web-api/**',
        'bootstrap/dist/js/bootstrap*.js',
        '@ng-bootstrap/**',
        '@ngrx/**',
        'ngrx-store-freeze/**',
        'deep-freeze-strict/**',
        'angular2-jwt/**',
        'reflect-metadata/**',
        'es6-shim/**',
        'hammerjs/**',
        'angularfire2/**',
        'firebase/**'
    ], {
        cwd: "node_modules/**"
    })
    .pipe(gulp.dest("./wwwroot/libs"));

gulp.src([
    'node_modules/bootstrap/dist/css/bootstrap.css'
]).pipe(gulp.dest('./wwwroot/libs/css'));
});

Let me know what you are using for your link file.

[sumtec]

Hi @xonuzofa ,

My rxjs is installed via npm and the rx.js is copied from bundle folder.

So, you mean I have to preserve the exact folder structure like lib/rxjs/bundle/rx.js, not just lib/rxjs/rx.js? Well, the folder structure was like that since I tried the angularjs2 beta maybe 8. It worked fine until the RTM of the angular JS.

In your gulp file, it seems like you copied everything of the rxjs. And you are not using the bundle of the rxjs, aren't you? I can try that but I hope I can just use bundle to reduce the connection amount. I thought the current issue has nothing to do with the css or html. My problem is that it's throwing error when trying to use the rxjs bundles with angularjs 2, just in case I am not making it clear.

In my package.json I have "rxjs": "5.0.3" and using npm install I get a node_modules/rxjs folder, which does not contain a rx.js.

And what do you mean by "does not contain a rx.js"? I am confused with the next line saying "My Rx.js file in node_modules/rxjs/Rx.js is as follows". I checked the node_modules/rxjs and there is a rx.js but it is not the bundles version.

Thanks

[xonuzofa]

Yes i used to use the rx file inside the bundle but it did not work after the update either. So i switched it to the Rx.js file on the root folder and it worked for me. But yes, it will require you to move the entire rxjs folder or edit the file as needed.

[imcotton]

Just want to remind since #2121 has landed with v5.1 release, this problem should been resolved, please upgrade your rxjs version and try.

[kwonoj]

As fix for this is released and believe latest version resolve it, closing issue. If it still occurs please feel freely report / reopen.

[mertdeg]

I am using rxjs v5.3.0, and I am still hitting this exception with angular 4.0.2

[kwonoj]

@mertdeg would you mind to share minimal reproducible repo for issue? it'll help to look into issues.

[mertdeg]

@kwonoj Nevermind, I think i was using rxjs-es npm package, which seems to be deprecated

[MatGhp]

I have updated to version 5.3.1 and the problem was solved.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.