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

Ответ 1

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

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

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

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

Обновить альфа 50 (08/12/2015)

Вскоре после того, как альфа-49 была выпущена, они выпустили альфа-версию 50. Эта версия обновила rxjs до альфа-14. Итак, вы поймете, что делаете

npm install [email protected]
npm install [email protected]

Обновить альфа-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.

Обновление

CHANGELOG обновлен, чтобы показать это нарушение. Там комментарий от @jeffbcross в вопрос № 5642, который разъясняет LOT в этом вопросе.

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

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

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

На самом деле произошло нарушение в отношении RxJS и Angular2. Итак, теперь для использования таких операторов, как map, вы должны импортировать их отдельно. Вы можете увидеть изменение этого запроса на перенос. И уже есть 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 [email protected]

Или просто npm install rxjs, если вы хотите использовать последнюю версию, но заблокировать ее как альфа-11.

Настройте пути в System.config(обратите внимание, что это моя конфигурация, не обязательно лучшая, и я предполагаю, что вы установили alpha 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.

Ответ 2

Если вы хотите использовать бета-версии Angular 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';

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

Ответ 3

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

import 'rxjs/add/operator/map';

Ура!

Ответ 4

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

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

node_modules defaultExtension был критическим для меня (я не знаю, почему путь rxjs/* не добавляет .js, но hey ho.)

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

Ответ 5

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