errori osservabili con Angular2 beta.12 e RxJs 5 beta.3

Question

Ciao,

sto usando Angular2 beta 12 in esecuzione in VS2015. Quando eseguo l'aggiornamento a rxjs dalla versione 5.0.0-beta.2 alla versione beta.3, ho riscontrato una serie di eccezioni relative alle mie promesse.

E.g.

1. Proprietà map non esiste sul tipo Observable<Response>
2. Proprietà share non esiste nel tipo Observable<Response>
3. ambiente dichiarazione moduli non può specificare il nome relativo modulo
4. moduli ambientali non possono essere nidificate in altri moduli o spazi di nomi.

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" 
    } 
} 

questione riguarda mappare la funzione in questo codice:

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 un altro, il problema è con 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();} 

mi sento in questo potrebbe essere importante - una gamma di file rxjs ha unde rlined rosso per i riferimenti relativi ../../Observable (nell'esempio qui sotto è in interval.d.ts)

import { IntervalObservable } from '../../observable/IntervalObservable'; 
declare module '../../Observable' { 
    namespace Observable { 
     let interval: typeof IntervalObservable.create; 
    } 
} 

miei 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]); 

La mia pagina 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> 

stumped e apprezzerebbe qualche aiuto.

Grazie, Dan.

Answer 1

In base al pacchetto package.json di Angular, è necessario utilizzare esattamente RxJS 5.0.0-beta.2 https://github.com/angular/angular/blob/master/package.json#L37

Answer 2

Per quanto riguarda gli operatori, è necessario importarli manualmente poiché non sono inclusi nella classe Osservabile per impostazione predefinita.

Per questo si può fare sia:

import {Observable} from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/share'; 

Or (per includere tutti gli operatori):

import {Observable} from 'rxjs/Rx'; 

altrimenti normalmente non è necessario definire rxjs nella configurazione SystemJS nella mappa bloccare. È sufficiente includere il file in bundle corrispondente in un tag di script.

Answer 3

Per VS2015 c'è una soluzione per questo problema elencato su GitHub here

quanto arounds di lavoro, per ora, è possibile sostituire C: \ Program Files (x86) \ Microsoft Visual Studio 14.0 \ Common7 \ IDE \ CommonExtensions \ Microsoft \ TypeScript \ typescriptServices.js con il file in https://raw.githubusercontent.com/Microsoft/TypeScript/Fix8518/lib/typescriptServices.js. Per prima cosa prendi un backup locale.

IMPORTANTE: essere sicuri che stai sulla VS2015 Aggiornamento e hanno dattiloscritto> 1.8.2 installato

(Il mio VS non partiva dopo la sostituzione del file sul Update 1)

Sto usando rxjs 5.0.0-beta. btw.