缺少可观察的方法RxJS 5.0.0-beta.0

Question

我在使用带有Angular 2的RxJS时遇到了问题.Modelcript定义文件中建议的大多数方法都没有在我的Observable对象上定义，如...

然后我发现，Observable原型上不存在方法。

我知道很多事情从版本4改为5，所以我想念一些东西吗？

Browserify为我添加了...

Answer 1

如果没有看到您的实际代码，我无法准确地告诉您要添加什么来修复它。

但是一般的问题是这样：RxJS 5现在不再包含在Angular 2中，因为它已进入Beta阶段。您需要导入所需的运算符，或者将它们全部导入。 import语句如下所示：

import 'rxjs/add/operator/map'; // imports just map
import 'rxjs/add/operator/mergeMap'; // just mergeMap
import 'rxjs/add/operator/switchMap'; // just switchMap
import {delay} from 'rxjs/operator/delay'; // just delay

或喜欢

import 'rxjs/Rx'; // import everything

要确定所需模块的路径，请查看source tree。使用add的每次导入都会向Observable或Observable.prototype添加属性。如果没有add，您需要import {foo} from 'rxjs/path/to/foo'。

您还需要确保正确地将RxJS带入项目中。这样的东西会进入你的index.html文件：

System.config({
    map: {
        'rxjs': 'node_modules/rxjs' // this tells the app where to find the above import statement code
    },
    packages: {
        'app': {defaultExtension: 'js'}, // if your app in the `app` folder
        'rxjs': {defaultExtension: 'js'}
    }
});
System.import('app/app'); // main file is `app/app.ts` 

如果您使用Webpack to build the Angular 2 app like in this Github project（就像我一样），那么您就不需要那些System内容，而且导入应该这样做。

Answer 2

是的，在Angular 2.0中，你必须包含你需要的运算符/可观察量。

我这样做：

import 'rxjs/operator/map';
import 'rxjs/operator/delay';
import 'rxjs/operator/mergeMap';
import 'rxjs/operator/switchMap';
import 'rxjs/observable/interval';
import 'rxjs/observable/forkJoin';
import 'rxjs/observable/fromEvent';

但是，您还需要在System.js中配置它

System.config({
            defaultJSExtensions: true,
            paths: {
                'rxjs/observable/*' : './node_modules/rxjs/add/observable/*.js',
                'rxjs/operator/*' : './node_modules/rxjs/add/operator/*.js',
                'rxjs/*' : './node_modules/rxjs/*.js'
            }
        });

以下是工作代码：https://github.com/thelgevold/angular-2-samples

Answer 3

我的项目中有一个JSPM设置，所以将rxjs添加到路径部分是不够的。

jspm将以下内容添加到我的SystemJS配置（地图部分）：

"npm:angular2@2.0.0-beta.6": {
  "crypto": "github:jspm/nodelibs-crypto@0.1.0",
  "es6-promise": "npm:es6-promise@3.1.2",
  "es6-shim": "npm:es6-shim@0.33.13",
  "process": "github:jspm/nodelibs-process@0.1.2",
  "reflect-metadata": "npm:reflect-metadata@0.1.2",
  "rxjs": "npm:rxjs@5.0.0-beta.0",
  "zone.js": "npm:zone.js@0.5.14"
},

因此，如果您使用jspm，请确保删除上面的rxjs映射，否则一些rxjs文件将被加载两次，一次通过jspm_packages，一次通过node_modules。