Угловой 2-х сервис Http, не отображающий карту() и другие функции RxJS

Question

Кто-нибудь знает, были ли какие-либо нарушения изменений в http между альфа-45 и альфа-48? Я искал вокруг, и ничего не нашел. Моя проблема в том, что приведенный ниже код отлично работает на Alpha 45. Но теперь, когда я обновился до Alpha 48, я получаю сообщение об ошибке _this.http.post(...).map is not a function при попытке запустить приложение. Странно то, что IntelliSense показывает, что http.post возвращает наблюдаемое. Это означает, что функция карты должна быть доступна. Любая помощь будет оценена по достоинству. Благодаря!

public Authenticate(username: string, password: string): Observable<boolean> { 

    this.ResetAuthenticationValues(); 

    return Observable.create((subscriber: EventEmitter<string>) => { 

     let body: string = 'grant_type=password&username=' + username + '&password=' + password; 
     let headers = new Headers(); 
     headers.append('Content-Type', 'application/x-www-form-urlencoded'); 

     this.http.post('http://example.com', body, {headers: headers}) 
      .map(res => res.json()) 
      .subscribe(
       (data: DataResponse) => { 
        if (!data.error) { 
         this.accessToken = {access_token: data.access_token, token_type: data.token_type}; 
         subscriber.next(this.isAuthenticated = true);      
        } 
        else 
         subscriber.error(this.isAuthenticated = false); 
       }, 
       (err) => subscriber.error(err), 
       () => subscriber.complete() 
      ); 

     return() => { }; 
    }); 
} 

Answer 1

Очередное обновление(кашель, жаль, что забыли эту опцию)

Если вы хотите, чтобы избежать добавления индивидуально операторы, которые можно импортировать полный Rx, делая

import {Observable, Subject, ReplaySubject, etc...} from 'rxjs/Rx'; 

У вас будут все операторы :)

Update альфа 50 (08/12/2015)

Вскоре после того, как альфа-49 был выпущен, они выпустили альфа 50. Эта версия модернизирована rxjs к альфа 14. Таким образом, вы будете хорошо идти, делая

npm install angular2@latest 
npm install rxjs@5.0.0-alpha.14 

Update альфа 49 (08/12/2015)

в настоящее время alpha 49 был освобожден, и это не изменится, а это значит, это будет оставаться во времени. Оригинальный ответ остается в силе с некоторыми изменениями, пути изменились rjxs, поэтому он должен быть следующим:

System.config({ 
    paths: { 
     'rxjs/add/observable/*' : 'node_modules/rxjs/add/observable/*.js', 
     'rxjs/add/operator/*' : 'node_modules/rxjs/add/operator/*.js', 
     'rxjs/*' : 'node_modules/rxjs/*.js' 
    } 
}); 

import 'rxjs/add/operator/map'; 

Примечание

Эта версия требует именно версию alpha 13, так что если в вашем package.json у вас уже есть другая версия, вам придется удалить ее, установить angular2, а затем установить rjxs.

Update

CHANGELOG был обновлен, чтобы показать это изменение разрывной. Есть comment from @jeffbcross в issue #5642, который разъясняет LOT в этом вопросе.

Цитирование части этого комментария

Модульности была целью нового RxJS проекта с самого начала, и он не был до недавнего времени, что мы начали действительно становимся серьезным о составлении операторов вместо того, чтобы полагаться на многоуровневой систему распределения Rx.

Оригинальный ответ

Был на самом деле критическое изменение в отношении RxJS и Angular2. Итак, теперь для использования операторов, таких как map, вы должны импортировать их отдельно. Вы можете увидеть изменение в этом pull request. И уже есть issue о вашем вопросе.

Я рекомендую вам придерживаться альфы 47. Но всем, кто нуждается и хочет знать, что такое решение, как в запросе на растяжение, указано, добавить оператора отдельно.

Вы должны иметь что-то вроде этого

import {Http, ...} ...; 

// Component 
constructor(http: Http) { 
    http.get(...).map() // 'map' doesn't exist! Ouch! 
} 

Чтобы это исправить, добавьте оператор (извините за повторение это так много раз) и настроить пути к rxjs

Примечание

Это должно быть сделано с помощью RxJS alpha 11 или alpha 12 (не путать его с @reactivex/rxjs, теперь это просто rxjs). Так установить его с

npm install rxjs@5.0.0-alpha.11 

npm install rxjs или просто, если вы хотите, последнее, хотя они lock it быть альфа 11.

Настройка пути в вашем System.config (обратите внимание, что это мой конфиг, не обязательно самый лучший и я предполагаю, что вы установили альфа 11)

System.config({ 
    paths: { 
     'rxjs/observable/*' : 'node_modules/rxjs/observable/*.js', 
     'rxjs/operators/*' : 'node_modules/rxjs/operators/*.js', 
     'rxjs/*' : 'node_modules/rxjs/*.js' 
    } 
}); 

После того, как вы закончите с настройкой, вы можете импортировать оператор следующим

import 'rxjs/operators/map'; 

И все. Вам придется делать это с каждым оператором. Поэтому я повторяю, я рекомендую вам придерживаться альфы 47, как я уже говорил вам в комментарии. Я попытаюсь обновить ответ позже с помощью plnkr.

Answer 2

В отличие от того, что написано выше, я обнаружил, что мне нужно использовать

System.config({ 
     packages: { 
      'app': {defaultExtension: 'js'}, 
      'node_modules': {defaultExtension: 'js'} 
     }, 
     paths: { 
      'rxjs/*' : 'node_modules/rxjs/*.js' 
     } 
    }); 

node_modulesdefaultExtension был критический мозговым для меня (я не знаю, почему rxjs/* путь не добавляет .js но эй хо.)

Это работает от 48 до последней 52.

Answer 3

Если вы хотите использовать бета-версии Угловое 2 или будущие релизы реального производства, то вам нужно сделать два-го чтобы это работало.

1) Сначала вам необходимо обновить конфигурацию System.config() в index.html включить ссылки на RxJS:

System.config({ 
    map: { 
     'rxjs': 'node_modules/rxjs' 
    }, 
    packages: { 
     'app': {defaultExtension: 'js'}, // assumes your code sites in `src/app` 
     'rxjs': {defaultExtension: 'js'} 
    } 
}); 
System.import('app/app'); // this assumes your main file is `app.ts` and it sits in the `app` folder. 

2) Затем вы можете импортировать map() и другие (или все) RxJS операторов в приложение с import строк в основной файл (app.ts в моем случае):

import 'rxjs/Rx'; // this would import all RxJS operators 

Если вы предпочитаете импортировать только map() сохранить размер вниз, вы могли бы сделать это вместо:

import 'rxjs/add/operator/map'; 

Вам не требуется необходимо импортировать их в каждый файл класса.Просто импортируйте их в свой основной файл, чтобы сделать их доступными для всех ваших других компонентов/служб/директив.

Answer 4

Вам нужно импортировать оператор карты Rx в компоненте, как

import 'rxjs/add/operator/map'; 

Ура!

Answer 5

У меня была эта проблема, и, как оказалось, проблема с версией rxjs - angular 2.0.0-rc4 требует rxjs-5.0.0-beta.6, у меня была beta.10 в моей конфигурации jspm!