Angular2 beta.12 和 RxJs 5 beta.3 的可观察错误
Observable errors with Angular2 beta.12 and RxJs 5 beta.3
您好,
我在 VS2015 中使用 Angular2 beta 12 运行。当我将 rxjs 从 5.0.0-beta.2 更新到 beta.3 时,我遇到了一系列通常与我的承诺相关的异常。
例如
- 属性
map
在类型 Observable<Response>
上不存在
- 属性
share
类型不存在 Observable<Response>
- 环境模块声明不能指定相对模块名称
- 环境模块不能嵌套在其他模块或命名空间中。
Package.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"
}
}
问题与此代码中的地图功能有关:
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');
}
}
在另一个方面,问题出在 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();}
我觉得这可能很重要 - 一系列 rxjs 文件已经用红色下划线表示相关引用 ../../Observable
(下面的示例在 interval.d.ts 中)
import { IntervalObservable } from '../../observable/IntervalObservable';
declare module '../../Observable' {
namespace Observable {
let interval: typeof IntervalObservable.create;
}
}
我的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]);
我的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>
我很困惑,希望得到一些帮助。
谢谢丹
关于运算符,您需要手动导入它们,因为默认情况下它们不包含在 Observable class 中。
为此,您可以执行以下任一操作:
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/share';
或(包括所有运算符):
import {Observable} from 'rxjs/Rx';
否则通常不需要将 rxjs 定义到 map 块中的 SystemJS 配置中。将相应的捆绑文件包含到脚本标签中就足够了。
根据 Angular 的 package.json 你应该使用 RxJS 5.0.0-beta.2 https://github.com/angular/angular/blob/master/package.json#L37
对于 VS2015,GitHub here
中列出了解决此问题的方法
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.
重要提示:确保您使用的是 VS2015 更新 2 并且安装了 TypeScript > 1.8.2
(在更新 1 上替换文件后我的 VS 无法启动)
我正在使用 rxjs 5.0.0-beta。6 顺便说一句。
您好,
我在 VS2015 中使用 Angular2 beta 12 运行。当我将 rxjs 从 5.0.0-beta.2 更新到 beta.3 时,我遇到了一系列通常与我的承诺相关的异常。
例如
- 属性
map
在类型Observable<Response>
上不存在
- 属性
share
类型不存在Observable<Response>
- 环境模块声明不能指定相对模块名称
- 环境模块不能嵌套在其他模块或命名空间中。
Package.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"
}
}
问题与此代码中的地图功能有关:
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');
}
}
在另一个方面,问题出在 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();}
我觉得这可能很重要 - 一系列 rxjs 文件已经用红色下划线表示相关引用 ../../Observable
(下面的示例在 interval.d.ts 中)
import { IntervalObservable } from '../../observable/IntervalObservable';
declare module '../../Observable' {
namespace Observable {
let interval: typeof IntervalObservable.create;
}
}
我的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]);
我的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>
我很困惑,希望得到一些帮助。
谢谢丹
关于运算符,您需要手动导入它们,因为默认情况下它们不包含在 Observable class 中。
为此,您可以执行以下任一操作:
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/share';
或(包括所有运算符):
import {Observable} from 'rxjs/Rx';
否则通常不需要将 rxjs 定义到 map 块中的 SystemJS 配置中。将相应的捆绑文件包含到脚本标签中就足够了。
根据 Angular 的 package.json 你应该使用 RxJS 5.0.0-beta.2 https://github.com/angular/angular/blob/master/package.json#L37
对于 VS2015,GitHub here
中列出了解决此问题的方法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.
重要提示:确保您使用的是 VS2015 更新 2 并且安装了 TypeScript > 1.8.2
(在更新 1 上替换文件后我的 VS 无法启动)
我正在使用 rxjs 5.0.0-beta。6 顺便说一句。