缺少可观察方法 RxJS 5.0.0-beta.0
Missing observable methods RxJS 5.0.0-beta.0
我在 Angular 2 中使用 RxJS 时遇到问题。Typescript 定义文件中建议的大多数方法都没有在我的 Observable 对象上定义,例如...
然后我发现,Observable 原型上不存在方法。
我知道从版本 4 到版本 5 发生了很多变化,所以我错过了什么吗?
Browserify 为我添加了它...
是的,在 Angular 2.0 中你必须包含你需要的 operators/observables。
我是这样做的:
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'
}
});
没有看到您的实际代码,我无法确切地告诉您要添加什么来修复它。
但普遍的问题是:RxJS 5 不再包含在 Angular 2 中,因为它已经进入 Beta 阶段。您需要导入所需的运算符,或全部导入。导入语句如下所示:
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
东西,导入应该可以做到。
我的项目中有一个 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.
我在 Angular 2 中使用 RxJS 时遇到问题。Typescript 定义文件中建议的大多数方法都没有在我的 Observable 对象上定义,例如...
然后我发现,Observable 原型上不存在方法。
我知道从版本 4 到版本 5 发生了很多变化,所以我错过了什么吗?
Browserify 为我添加了它...
是的,在 Angular 2.0 中你必须包含你需要的 operators/observables。
我是这样做的:
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'
}
});
没有看到您的实际代码,我无法确切地告诉您要添加什么来修复它。
但普遍的问题是:RxJS 5 不再包含在 Angular 2 中,因为它已经进入 Beta 阶段。您需要导入所需的运算符,或全部导入。导入语句如下所示:
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
东西,导入应该可以做到。
我的项目中有一个 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.