typescript Angular2 beta.12 和 RxJs 5 beta.3 的可观察错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36271314/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Observable errors with Angular2 beta.12 and RxJs 5 beta.3
提问by DanAbdn
Hello,
你好，
I am using Angular2 beta 12 running in VS2015. When I update to rxjs from 5.0.0-beta.2 to beta.3 I encounter a range of exceptions generally relating to my promises.
我正在使用在 VS2015 中运行的 Angular2 beta 12。当我从 5.0.0-beta.2 更新到 rxjs 到 beta.3 时，我遇到了一系列通常与我的承诺有关的异常。
E.g.
例如
- Property
mapdoes not exist on typeObservable<Response> - Property
sharedoes not exist in typeObservable<Response> - Ambient modules declaration cannot specify relative module name
- Ambient modules cannot be nested in other modules or namespaces.
map类型上不存在属性Observable<Response>- 属性
share不存在类型Observable<Response> - 环境模块声明不能指定相对模块名称
- 环境模块不能嵌套在其他模块或命名空间中。
Package.json
包.json
{
"name": "ASP.NET",
"version": "0.0.0",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
"dependencies": {
"angular2": "2.0.0-beta.12",
"systemjs": "0.19.24",
"es6-promise": "3.1.2",
"es6-shim": "0.35.0",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.3", // beta.2 allowed project to build
"zone.js":"0.6.6"
},
"devDependencies": {
"gulp": "3.9.1",
"gulp-concat": "2.6.0",
"gulp-cssmin": "0.1.7",
"gulp-uglify": "1.5.3",
"rimraf": "2.2.8",
"concurrently": "2.0.0",
"lite-server": "2.1.0",
"typescript": "1.8.9"
}
}
Issue relates to map function in this code:
问题与此代码中的地图功能有关：
import {Injectable} from 'angular2/core';
import {Http, Response} from 'angular2/http';
import {Headers, RequestOptions} from 'angular2/http';
import {Observable} from 'rxjs/Observable';
import {ApplicationVM} from '../../Applications/ViewModels/Application.ViewModel';
@Injectable()
export class ApplicationService {
constructor(private http: Http) { }
private _serviceUrl = './../api/';
getApplications() {
return this.http.get(this._serviceUrl + "applications/active")
.map(res => <ApplicationVM[]>res.json())
// .map((res: Response) => res.json())
.do(data => console.log(data)) // eyeball results in the console
.catch(this.handleError);
}
private handleError(error: Response) {
console.log(error);
return Observable.throw(error.json().error || 'Server error');
}
}
In another, the problem is with share()
另一方面，问题在于 share()
constructor(private _http: Http) {
console.log("constructor");
this.menulist$ = new Observable(observer => this._menulistObserver = observer).share();
this.menuState$ = new Observable(observer => this._menuStateObserver = observer).share();
this.menuWidth$ = new Observable(observer => this._menuWidthObserver = observer).share();}
I feel this might be important - a range of rxjs files have underlined red for relative references ../../Observable(example below is in interval.d.ts)
我觉得这可能很重要 - 一系列 rxjs 文件为相对引用用红色下划线../../Observable（下面的示例在 interval.d.ts 中）
import { IntervalObservable } from '../../observable/IntervalObservable';
declare module '../../Observable' {
namespace Observable {
let interval: typeof IntervalObservable.create;
}
}
My boot.ts
我的 boot.ts
///<reference path="./../node_modules/angular2/typings/browser.d.ts"/>
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {AppComponent} from './app.component';
import {HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/Rx'; // kitchen sink
// Bootstrap the application and reference the required directives
bootstrap(AppComponent, [ROUTER_PROVIDERS, HTTP_PROVIDERS]);
My html page
我的html页面
<!-- 1. Load libraries -->
<script src="~/nodelibs/angular2/bundles/angular2-polyfills.js"></script>
<script src="~/nodelibs/systemjs/system.src.js"></script>
<script src="~/nodelibs/typescript/lib/typescript.js"></script>
<script src="~/nodelibs/rxjs/bundles/Rx.js"></script>
<script src="~/nodelibs/angular2/bundles/angular2.dev.js"></script>
<script src="~/nodelibs/angular2/bundles/router.dev.js"></script>
<script src="~/nodelibs/angular2/bundles/http.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
var rootPath = "@Url.Content("~/")";
System.config({
//transpiler: 'typescript',
//typescriptOptions: { emitDecoratorMetadata: true },
baseURL: rootPath,
defaultJSExtensions: true,
packages: {
app: {
//format: 'register',
defaultExtension: 'js'
}, map: {
'rxjs/observable/*' : 'nodelibs/rxjs/observable/*.js',
'rxjs/operators/*' : 'nodelibs/rxjs/operators/*.js',
'rxjs/*' : 'nodelibs/rxjs/*.js'
}
}
});
System.import("/app/boot.js")
.then(null, console.error.bind(console));
</script>
I'm stumped and would appreciated some assistance.
我很难过，希望得到一些帮助。
Thank, Dan.
谢谢，丹。
采纳答案by Juergen Zimmermann
According to Angular's package.json you should use exactly RxJS 5.0.0-beta.2 https://github.com/angular/angular/blob/master/package.json#L37
根据 Angular 的 package.json，你应该使用 RxJS 5.0.0-beta.2 https://github.com/angular/angular/blob/master/package.json#L37
回答by Thierry Templier
Regarding operators, you need to import them manually since they aren't included in the Observable class by default.
关于运算符，您需要手动导入它们，因为默认情况下它们不包含在 Observable 类中。
For this you can do either:
为此，您可以执行以下任一操作：
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/share';
Or (to include all operators):
或者（包括所有运营商）：
import {Observable} from 'rxjs/Rx';
Otherwise normally you don't need to define rxjs into your SystemJS configuration in the map block. Including the corresponding bundled file into a script tag is enough.
否则通常您不需要在 map 块中的 SystemJS 配置中定义 rxjs。将相应的捆绑文件包含在脚本标签中就足够了。
回答by Arg0n
For VS2015 there's a workaround for this problem listed on GitHub here
对于 VS2015，这里在 GitHub 上列出了针对此问题的解决方法
As work arounds for now, you can replace C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript\typescriptServices.js with the file in https://raw.githubusercontent.com/Microsoft/TypeScript/Fix8518/lib/typescriptServices.js. First take a local backup though.
作为目前的解决方法，您可以将 C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript\typescriptServices.js 替换为https://raw.githubusercontent.com/ 中的文件Microsoft/TypeScript/Fix8518/lib/typescriptServices.js。首先进行本地备份。
IMPORTANT: Be sure you're on VS2015 Update 2and have TypeScript > 1.8.2 installed
重要提示：请确保您使用的是 VS2015 Update 2并安装了 TypeScript > 1.8.2
(My VS would not start after replacing the file on Update 1)
（在更新 1 上替换文件后，我的 VS 无法启动）
I am using rxjs 5.0.0-beta.6btw.
我正在使用 rxjs 5.0.0-beta。6顺便说一句。
