Observable errors with Angular2 beta.12 and RxJs 5 beta.3

Question

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.

E.g.

1. Property map does not exist on type Observable<Response>
2. Property share does not exist in type Observable<Response>
3. Ambient modules declaration cannot specify relative module name
4. Ambient modules cannot be nested in other modules or namespaces.

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

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()

 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)

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

My html page

 <!-- 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.

Solution 1

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

Solution 2

Regarding operators, you need to import them manually since they aren't included in the Observable class by default.

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.

Solution 3

For VS2015 there's a workaround for this problem listed on 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.

IMPORTANT: Be sure you're on VS2015 Update 2 and have TypeScript > 1.8.2 installed

(My VS would not start after replacing the file on Update 1)

I am using rxjs 5.0.0-beta.6 btw.

Comments

[DanAbdn]

Great! I was wondering where I would find this info of which packages I should be using. Thanks very much.

[DanAbdn]

I already include the 'kitchen sink' i.e. rxjs/Rx as noted in the original question. But a very helpful tip for optimising Angular projects. Thanks.

[superjos]

In my team we are experiencing the exact same issue and only for Visual Studio intellisense (webpack TypeScript compiling is fine). While I'm aware that current angular version needs rxjs 5 beta 2, do you know how are those two things related? I.e. why it builds fine, but VS complains? We need that rxjs version because of ngrx-store

[DanAbdn]

Yep you are totally right with Angular RC1 this solution works...my original question was for Angular beta where version rxjs beta 2 was supposed to be used. For rxjs beta 6 with Angular RC it is something to do with missing Typescript functionality which causes lots of build errors. Great to have your feedback for others to see.

[crh225]

beta6 now I believe

[jessepinho]

Fixed it for me! It's worth noting that the first option (just importing the operators manually) is, as far as I understand, a much more performant option, since those imports will only be used for TypeScript compilation. Thus, it won't result in more code being added to your codebase, as would be the case if you use the second option.