Наблюдаемые ошибки с Angular2 beta.12 и RxJs 5 beta.3

Здравствуйте,

Я использую Angular2 beta 12, работающий в VS2015. Когда я обновляю до rxjs от 5.0.0-beta.2 до бета-версии 3, я сталкиваюсь с рядом исключений, обычно относящихся к моему promises.

например.

  • Свойство map не существует в типе Observable<Response>
  • Свойство share не существует в типе Observable<Response>
  • Объявление модулей Ambient не может указывать относительное имя модуля
  • Модули Ambient не могут быть вложены в другие модули или пространства имен.

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 (пример ниже находится в интервале .d.ts)

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

My 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>

Я в тупике и ценю некоторую помощь.

Спасибо, Дэн.

Ответ 2

Относительно операторов вам необходимо импортировать их вручную, поскольку они по умолчанию не включены в класс Observable.

Для этого вы можете сделать:

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

Или (включить все операторы):

import {Observable} from 'rxjs/Rx';

В противном случае вам не нужно определять rxjs в вашей конфигурации SystemJS в блоке карты. Включение соответствующего связанного файла в тег script достаточно.

Ответ 3

Для VS2015 существует обходной путь для этой проблемы, указанный в GitHub здесь

В настоящее время вы можете заменить 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. Сначала сделайте локальную резервную копию.

ВАЖНО. Убедитесь, что вы находитесь в обновлении VS2015 2 и установите TypeScript > 1.8.2

(Мой VS не запускался после замены файла на Update 1)

Я использую rxjs 5.0.0-beta. 6 btw.